teleren/devto huggingface dataset:
Local Development with Public and Private monorepos
Tags: webdev, devops, javascript, npm
Published: 2023-06-20 21:41:32

In the project I'm working on now [webstudio.is](https://webstudio.is), we have 2 mono repositories.

One open and fully [public](https://github.com/webstudio-is/webstudio-builder) and one closed source.

Projects from the closed repository use libraries from the open one.

So usually working on a closed repository looks like this

- we publish libraries from public repository into npm
- we update libraries in a closed repository `pnpm up -r -L '@webstudio-is/*'`

Local development becomes terribly messy with this approach.
Each iteration takes an awful lot of time _(15 minutes to 30 minutes on average)_. 
Create PR wait for all checks to be done, wait for all checks to be done and publish.

To avoid all this I tried.

## Link protocol

in package.json of the closed packages I replaced all 

```json
"dependency": {
  "@webstudio-is/form-handlers": "^0.75.0",
  ...
}
```

to

```json
"dependency": {
  "@webstudio-is/form-handlers": "link:/Users/User/webstudio-is/webstudio-builder/packages/form-handlers",
  ...
}
```

This worked for some of the packages in the closed repository. But some packages got runtime errors like `TypeError: Cannot read properties of null (reading 'useContext')`. 
It seemed like some dependencies were duplicated and I didn't manage to get rid of this error.

## Soft link packages from one monorepo into another

I plugged the open repository as a workspace into a closed repo. `ln -s /Users/ice/webstudio-is/webstudio-designer/packages packages` and added into workspaces. The result is the same as with 1.

I guess it's possible to fix it but I failed.


## Verdaccio

[Valentin Semirulnik](https://twitter.com/7rulnik?lang=en) gave me an idea to use [verdaccio](https://verdaccio.org/)
The idea to use private proxy registry for local development

And it worked.

Briefly how I use it. 
Everytime I need to check how an open library will work with a closed one, I do.

```bash
# Run verdaccio locally
verdaccio
# build all libs
pnpm run build
# change version of all public libraries from current to exprimental like "0.75.0" => "0.75.1-qawqisps.0" etc
pnpm -r exec pnpm version prepatch --preid $(cat /dev/urandom | LC_ALL=C tr -dc 'a-z' | fold -w 8 | head -n 1)
# Publish all to verdaccio registry
pnpm -r publish --access public --no-git-checks --registry http://localhost:4873
# Reset version changes I made to package.json (DANGEROUS! as can remove changes you made)
git restore --source=$(git branch --show-current) '**/*/package.json
```

And now in a closed project I can just run

```bash
pnpm up -r -L '@webstudio-is/*' --registry http://localhost:4873
```

Now it takes me 1-2 minutes to check something. This is still a lot but I have not found a better solution.
My new calculator repository
Tags: python, github, programming, osdc
Published: 2023-06-20 21:36:55

Hi everyone,

As part of my OSDC course, taught by @szabgab , 
I decided today to create a new repository in the theme of binary calculator and I called it [pyBinary](https://github.com/chapnitsky/pyBinary).


I also added a basic pytest CI to it aswell.
The calculator is visualizing the bits results in each operation and finally the total operations result.

I would like to add more unique functionality to it soon!

Have a great day!
Practical lab Questions On Linux(Day 6)
Tags: beginners, cloud, devops, 120daysofdevops
Published: 2023-06-20 21:23:45

It has been an interesting 5 days of learning devOps and you guys have been so wonderful with the Encouragement; Thanks guys!!!
So i decided to test myself on all i have learnt so far by participating in a practical lab questions set by my Teammate and senior, motivator and mentor in Tech. He is also a member of this platform; His name is **UWABOR COLLINS**

i will be sharing the questions as well, so you all can also play with with them. Enjoy guys!!

        LAB QUESTIONS 

1. How do you check the current working directory?
2. How do you create a new directory?
3. How do you navigate to a directory?
4. How do you list all files and directories in a directory?
5. How do you display the contents of a file?
6. How do you create a new file?
7. How do you rename a file?
8. How do you delete a file?
9. How do you copy a file to a new location?
10. How do you move a file to a new location?
11. How do you create a symbolic link to a file?
12. How do you search for a file by name or content?
13. How do you change the owner of a file?
14. How do you change the permissions of a file?
15. How do you create a new user account?
16. How do you change the password for a user account?
17. How do you switch to a different user account?
18. How do you log out of a user account?
19. How do you view the system's IP address?
20. How do you view the details of network interfaces?

PROJECT BASED QUESTIONS
1. How would you use the ls command to display only the files in a directory (not directories)?
2. Using the mkdir command, create a new directory called "my_folder" within your home directory.
3. How would you move a file called "file1.txt" from your current directory to "my_folder"? Use the mv command.
4.How would you copy all files in a directory called "my_files" to a new directory called "backup_files"? Use the cp command.
5. Using the rm command, delete a file called "old_file.txt" from your home directory.
6. How would you create an empty file called "new_file.txt" in your current directory? Use the touch command.
8. Using the echo command, write the message "Hello, world!" to a new file called "greeting.txt".
9. How would you use the cat command to display the contents of a file called "notes.txt" on the terminal?
10. How would you use the tail command to display the last 10 lines of a file called "log.txt"?

okay guys; that is all for day 6. You can share your answers with me. Day 7 loading
GIT branches and git commits naming
Tags: git, webdev
Published: 2023-06-20 21:07:58


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n65s3wm8hx8dlib853rp.png)
BRANCH NAMING
The git branch naming convection is excellent base.
Categories;

- features:for refactoring

- test:is for experimenting out side issue.

Description
After the reference, there should be another "/" followed by a description which sums up the purpose of this specific branch. This description should be short and "kebab-cased".
EXAMPLE:
You need to experiment outside of an issue/ticket: git branch test/no-ref/refactor-components-with-atomic-designXAMPLE:

Statement(s)

After the colon, the commit description should consist in short statements describing the changes.
EXample
git commit -m 'chore: write button documentation'

Trending in Webdev
In the web development community, recent discussions include the benefits of code reviews for catching bugs and improving code quality, top GitHub repositories for learning modern React development, and mind-blowing web features like native HTML dialogs. Developers also share their favorite websites for resources and insights.
Commit Naming Convention
For commits, you can combine and simplify the Angular Commit Message Guideline and the Conventional Commits guideline.

Category

A commit message should start with a category of change. You can pretty much use the following 4 categories for everything: feat, fix, refactor, and chore.

feat is for adding a new feature
fix is for fixing a bug
refactor is for changing code for peformance or convenience purpose (e.g. readibility)
chore is for everything else (writing documentation, formatting, adding tests, cleaning useless code etc.)
After the category, there should be a ":" announcing the commit description.
Does anyone else have mixed feelings with remote work?
Tags: discuss, productivity, workplace, career
Published: 2023-06-20 21:05:09

We hear a lot of backlash when prominent CEOs call for a return to office work culture, but I'm curious if others may feel opposite of the public sentiment?  

I support the option for people to work remotely within an org if their roles and responsibilities can be performed asynchronously, but my personal preference has always been to operate in-office.  That was taken away from me as a result of the pandemic as my company ended up shuttering the local office.  

After spending these last 3 years working 100% remotely, I find myself with a renewed desire for a hybrid working environment.  It's not an option with my current company, but I can't deny that it's what I think is best for my career progression. I'm far more effective with some in-person collaboration on a regular cadence.  Do you share similar sentiment, or do you find yourself freed by remote work?

Let me know your thoughts in the comments below ⬇️
#DEVDiscuss: Reddit's API Changes
Tags: devdiscuss, socialmedia, news, discuss
Published: 2023-06-20 21:01:40

Time for #DEVDiscuss — right here on DEV 😎

Inspired by the hot news topic of the week, tonight we're discussing...**Reddit's API changes!**

In case you missed it: [Reddit has recently made changes to its API](https://www.reddit.com/r/reddit/comments/145bram/addressing_the_community_about_changes_to_our_api/), including a decision to charge for API use over a certain limit. This update will cause various third party Reddit apps, including the very popular [Apollo](https://www.theverge.com/2023/6/8/23754183/apollo-reddit-app-shutting-down-api), to close down due to an inability to afford their operations. In response, the moderators of many Reddit communities have [taken their subreddits private in protest](https://apnews.com/article/reddit-blackout-api-91f60aaec2eaf7cd0e3751e2fb3dd653).

DEV user @theaccordance had a unique, intriguing take on the whole situation:
{% embed https://dev.to/theaccordance/the-reddit-blackout-is-a-lesson-in-risk-k5e %}
> The 2010s was a golden age in capital investment and the technology industry benefited significantly, enabling a lot of free resources as a draw to build audiences and engagement. However, the 2020s so far have proven to be more challenging. Money is no longer free and as a result, many companies are having to mature their business models to be more self-sustaining. This means reducing expenses and finding additional sources of revenue. Monetizing previously open APIs is an unfortunate intersection that addresses both needs. Expect less free beer on the internet as we progress through these tougher economic times.

So let's talk about it!

Questions:
- What do you think about Reddit's API changes?
- Have your internet browsing habits been affected by the protests?
- Do you think we'll continue to see changes in the "free" internet as the years progress?
- Any other perspectives you'd like to share on this topic?
New to Dev.to
Tags: beginners, python
Published: 2023-06-20 20:09:48

I'm currently filling out a portfolio of sorts for codeacademy. I'll be using Dev.to as my blog-posting platform. I'll later publish what I have been working on from the coming weeks. Don't expect anything too crazy, I'm still trying to get the hang of using python3 & bash. I still need to get used to using GitHub. It's supposed to be a text adventure, but i failed to see how ambitions that was when I named it, so It's just a questionnaire with a bizarre title.
Aplicando Filtros em DataFrames usando Pandas
Tags: python, datascience, tutorial, beginners
Published: 2023-06-20 18:41:34

Saudações, Cientistas de Dados! 👋

Uma das funcionalidades essenciais do Pandas é a capacidade de filtrar Dataframes, permitindo que os usuários selecionem e extraiam facilmente os dados relevantes para suas análises. Neste artigo, exploraremos como fazer filtros usando o Pandas.

**Filtros de Data:**

Muitas vezes, trabalhamos com conjuntos de dados que contêm informações temporais. O Pandas facilita a filtragem desses dados com base em datas específicas ou entre datas. 

Suponha que no nosso dataframe temos uma coluna chamada "data", vamos filtrar os dados correspondentes a uma data específica da seguinte maneira:

```
filtro_data = dados[dados['data'] == '2023-06-16']
```
Podemos também filtrar apenas os dados entre duas datas, como por exemplo, entre '2023-06-10' e '2023-06-15':

```
filtro_data = dados[(dados['data'] >= '2023-06-10') & (dados['data'] <= '2023-06-15')]
```

**Filtros de Critérios:**

Além dos filtros de data, podemos filtrar os dados com base em critérios específicos. Neste exemplo, vamos exibir apenas as linhas em que a coluna "valor" seja maior que 100.

```
filtro_critério = dados[dados['valor'] > 100]
```

Podemos também filtrar por um critério em texto, na coluna descrição queremos mostrar apenas os dados que contenham a palavra "importante", desse jeito:

```
filtro_texto = dados[dados['descrição'].str.contains('importante')]
```

**Encontrando uma Linha:**

Às vezes, precisamos encontrar uma linha específica com base em um critério. Vamos encontrar agora a linha que contém o valor máximo na coluna "valor".

```
linha_max = dados.loc[dados['valor'].idxmax()]
```

Combinando Critérios:

Em algumas situações, pode ser necessário combinar vários critérios. Vamos filtrar então apenas as linhas em que a idade seja maior que 30 e a cidade seja "São Paulo". 

```
filtro_combinado = dados[(dados['idade'] > 30) & (dados['cidade'] == 'São Paulo')]
```

Neste artigo, exploramos diferentes tipos de filtros. O Pandas fornece uma sintaxe intuitiva e poderosa para realizar essas operações, permitindo que os usuários selecionem facilmente os dados relevantes para suas análises.
[Summary] Chapter#01 'The Internals of PostgreSQL' Book (Part-01).
Tags: postgres, apacheage, age, bitnine
Published: 2023-06-20 20:02:12

 **Logical Structure of Database Clusters** 


- A database cluster is a collection of databases that are managed by a single PostgreSQL server that is operational. The term database cluster in PostgreSQL is not a group of database servers but the server runs on a one host and manages a one database cluster.

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

- Database Clusters contain databases which are logically separated from each other. Each database is a collection of unique database objects and database objects used to store reference data. Database objects are basically tables, indexes etc.

- All database objects in PostgreSQL are internally merged by object identifiers which are unsigned 4-byte integers. It depends on the type of objects, like the OIDs of the heap table are stored in pg_database and pg_class, Which can be found out by issuing queries.

**Physical Structure of Database Clusters:**

- A database cluster is a base directory with subdirectories and files. The initdb utility initialises a new database cluster, usually set to the environment variable PGDATA. In PostgreSQL, a database is a subdirectory with tables, indexes, and configuration files. Tablespaces are distinct from other RDBMS, as they are a directory containing data outside the base directory.

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

- Database is a subdirectory and it is under the base subdirectory and the names of database directories and respective OIDs are identical.

- Layout of files Associated with Tables and Indexes:
Tables and Indexes having size less than 1GB is a single file storage stored under the database directory from where it belongs. Relfilenode manages the data files and OIDs are managing Tables and indexes, and in case of increment in table and indexes size from 1GB, PostgreSQL create new file named relfilenode.1 and it kept creating until data ends.
_fsm and _vm referred to as free space map and visibility map, which stores the information of free space capacity and visibility on each page within the table file.

- Tablespace is an additional data area of PostgreSQL which is outside the base directory. This function has been implemented in version 8.0. Create TABLESPACE statement creates the tablespace. Subdirectory like ‘PG_14_202011044’ would be created if tablespace is created.
Symbolic link from pg_tblspc is addressed by tablespace. If you create directory whose name is same as existing database OID, is created under the version specific subdirectory and new tables placed on created directory.

[Reference](https://www.interdb.jp/pg/pgsql01.html)
Create CSS Animations easily
Tags: css, javascript, html, animation
Published: 2023-06-20 19:48:19

I've recently created a template to easily create animations with CSS.
Go to this GitHub repository to use the template:
{% embed https://github.com/VulcanWM/css-animation %}

# Creating CSS Animations

Define animation frames as HTML `<div>` elements with the class `frame`. Give each frame a unique `id` of `frame[number]`.

```html
<div id="frame1" class="frame">
  ...
</div>

<div id="frame2" class="frame" style="display: none;">
  ...
</div>
```

Hide frames after the first by adding `style="display: none;"`.

Change these JavaScript variables:

```js
let seconds = 0.5; 
let loop = true;
let play = true;  
let numberOfFrames = 4;
```

- `seconds`: How long (in seconds) each frame displays. Default: `0.5`  
- `loop`: If the animation should loop. Default: `true`
- `play`: If the animation starts automatically. Default: `true`   
- `numberOfFrames`: The number of frames

The `frame` class styles the frame size and border.

---

The template contains:
- a slider to change the frame of the animation
- a checkbox to toggle or untoggle loop (`loop`)
- an input to change the display time of each frame (`seconds`)

You can view a demo of this CSS Animation template at [CSS Animation Template](https://vulcanwm.github.io/css-animation/)

---

Thanks for reading this article and let me know if you have any suggestions for the template!
RxJS Operators: audit
Tags: rxjs, javascript, typescript, webdev
Published: 2023-06-20 19:43:56

RxJS is a JavaScript library that enables the creation of asynchronous and event-based programs. The main type is the `Observable` and a suite of functions and operators are provided to make it easier to work with the data coming through. This series will detail those operators (and a few stand-alone functions) and provide examples of their use.

In this post, we’re going to cover the `audit` operator.

## What does it do?

The `audit` operator can be used to limit the number of values that are handled by the pipeline. We pass `audit` a function that returns a second observable, that observable then controls which values get handled. All values coming from the original observable will be ignored. When the second observable sends out a value, `audit` will allow the last value from the original observable through the pipeline.

This can be hard to get your head around just by having it explained. Let’s take a look at an example that will clear it up.

## Example

```tsx
import { Subject, audit, interval } from 'rxjs';

const auditTrigger$ = new Subject<void>();

interval(1000)
    .pipe(audit(() => auditTrigger$))
    .subscribe(x => {
        console.log(x);
    });

setInterval(() => {
    auditTrigger$.next();
}, 5000);
```

Here we’re using the `interval` function as our observable. This sends out incrementing numbers every second, but when we run it we will see:

```bash
3
8
13
18
```

This is the `audit` operator in action. We have set up `audit` to respond to events from `auditTrigger$`, which sends out a message every 5 seconds. So, every 5 seconds `audit` gets the message to output that last value handled. We can see the emitted values being sent if we update our pipeline to log the emitted value before it gets to the audit function.

```tsx
import { Subject, audit, interval, tap } from 'rxjs';

const auditTrigger$ = new Subject<void>();

interval(1000)
    .pipe(
        tap(x => console.log(`Value emitted: ${x}`)),
        audit(() => auditTrigger$)
    )
    .subscribe(x => {
        console.log(`Value handled: ${x}`);
    });

setInterval(() => {
    auditTrigger$.next();
}, 5000);
```

We’ve added the `tap` operator to our pipeline and configured it to log the value. Now if we run this we see:

```bash
Value emitted: 0   
Value emitted: 1   
Value emitted: 2   
Value emitted: 3   
**Value handled: 3**   
Value emitted: 4   
Value emitted: 5   
Value emitted: 6   
Value emitted: 7   
Value emitted: 8   
**Value handled: 8**   
Value emitted: 9
```

This would come in useful if we’ve got an observable that sends out a lot of values, but we don’t need to handle all of them. We could set it up to only process the values when another, less chatty, observable gets an update.

The source code for this example is available on GitHub:
{% embed https://github.com/drownedintech/rxjs-operators %}
Packed my ET Engine!!!
Published: 2023-06-20 19:13:30

My ET engine game maker platform!!!! ^^ 

Power by zenject and my little brain power. Time to make dozen gaem out of it!!!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dmkumt6ygj3ip7hjylf.png)
#tonicat #nekoniiistudio #projectZomtopia #projectZomboard #unity #developer #ET #ETengine #Unity #UnityChallenge
How To Add Custom Fonts In Tailwind
Tags: webdev, css, tailwindcss, frontend
Published: 2023-06-20 19:12:14


If you have an app that is configured to use Tailwind, you will have an `index.css` file that contains these 3 lines:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Here are the steps you can follow to set up a custom font in your project:

#### Step 1

Go to https://fonts.google.com/ and search for the font you want to use.

Select the font styles you want to use and copy the `@import` line.

![google-fonts-guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0osii8he67mnbbvsehh.png)

#### Step 2

Add the `@import` line you copied to your `index.css` file where you configure Tailwind.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
```

#### Step 3

After that, initalize the font family.

```css
@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}
```

Your final CSS will look like this:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}
```

Now your default font is set up as Montserrat, or whatever font you have selected.

Thank you for reading! 🙏

You can follow me on [Twitter](https://twitter.com/itsonureren)