teleren/devto huggingface dataset:
Starchart: "Mocking" A Database Part 2
Tags: docker, webdev, javascript, opensource
Published: 2023-03-17 23:47:44

As a continuation from [the previous post](https://dev.to/cychu42/starchart-mocking-a-database-part-1-2kg2), I managed to make the test database work.
It's not mocking anymore, but I'm keeping the title for consistency. 

## The Solution
Let's have a snippet of the `dock-compose` YAML file, which is what I used to make the test database, so it's easier to talk about this:

![code snippet of dock-compose YAML file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q59lgygwgmmnnncuubnu.png)

This file is an instruction that will be followed to create docker containers, when you run [`docker compose up`](https://docs.docker.com/engine/reference/commandline/compose_up/) command.
For this bit of code, it tells docker to:
* create a container using image of MySQL version 8.x.x
* name it "database"
* bind port 3306 (left) to the container's port 3306 (right)
* use local machine's directory (left) as source of container's virtual directory (right), such as `./mysql-data:/var/lib/mysql`
* set certain environment variables

`MYSQL_DATABASE` indicates the database to be made with the name `starchart`.
`MYSQL_USER` and `MYSQL_PASSWORD` are the account and password with [superuser](https://en.wikipedia.org/wiki/Superuser) access to that database.
`MYSQL_ROOT_PASSWORD` sets the password for the `root` user, which is a super user. Only this environment variable is mandatory.

## SQL File for Test Database

As you can see in that code snippet, I source a file `01-databases.sql`, which as a few SQL commands to setup a test database on top of `starchart` database. The file looks like this:

```
-- create test databases
CREATE DATABASE IF NOT EXISTS `starchart_test`;

-- create root user and grant rights
CREATE USER 'root'@'localhost' IDENTIFIED BY 'root_password';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';
```

First line [creates](https://dev.mysql.com/doc/refman/8.0/en/create-user.html) the database if it doesn't exist already. The second line creates that user with specified password, and then it [grants](https://dev.mysql.com/doc/refman/8.0/en/grant.html) all access to that user.
When the MySQL database container is made, Docker checks for SQL files under `/docker-entrypoint-initdb.d` to run, so these lines would be executed.

## What was the issue?
It turns out there were two issues with my connecting string to the test database.
As an example:
`DATABASE_URL="mysql://root:root_password@127.0.0.1:3306/starchart_test"`

`starchart` is the account to use to connect.
`root_password` is the password for the account.
`127.0.0.1` the IP of the database.
`3306` is the port.
`starchart_test` is the database name.

First, your system might refuse to connect to a high number port to avoid suspicious ports, so I needed to set it to be lower.  A MySQL database docker container lists 2 ports: 3306 and 33060. I was trying to bind the 33060 port, which was too high, so a lower number port did the trick. Another issue was that I had the wrong name for the database. I mistakenly thought it was meant to be container name instead.
SPVM::Sys now supports symbolic links on Windows, adds Perl-compatible API.
Tags: perl, spvm
Published: 2023-03-17 23:02:17


We reported last week that we were working on support for symbolic links on Windows to <a href="https://metacpan.org/pod/SPVM::Sys">SPVM::Sys</a>. Finally, SPVM::Sys now supports symbolic links on Windows.

# Symbolic Link Support on Windows

Portable <a href="https://metacpan.org/pod/SPVM::Sys#symlink">symlink</a>, <a href="https://metacpan.org/pod/SPVM::Sys#readlink">readlink</a>, and <a href="https://metacpan.org/pod/SPVM::Sys#l">l</a> methods have been added that also work on Windows, and <a href="https://metacpan.org/pod/SPVM::Sys#unlink">unlink</a> and <a href="https://metacpan.org/pod/SPVM::Sys#rename">rename</a> methods also support symbolic links.

In the process of testing symlinks, it was necessary to run Github Action in Windows developer mode. This is because symlink, which creates symbolic links, is not authorized in administrator mode, but only in developer mode. You can see how to do this in <a href="https://github.com/yuki-kimoto/SPVM-Sys/blob/master/.github/workflows/windows-latest-devel-mode.yml">this Github Action</a> using `ilammy/msvc-dev-cmd`.

# Perl Compatible API

A Perl-compatible API has been added to the <a href="https://metacpan.org/pod/SPVM::Sys#Class-Methods">Sys</a> class, so if you need to change your implementation between Linux and Windows, this class will take care of it.

# zlib support

Next week, we will try to support <a href="https://github.com/madler/zlib">zlib</a>, a module for GZIP. First we will resource the latest version of the zlib library. Then, we will implement the GZIP compression and decompression features of Perl's <a href="https://metacpan.org/pod/Compress::Raw::Zlib">Compress::Raw::Zlib</a>. And implement GZIP and compression functionality in <a href="https://metacpan.org/pod/IO::Compress::Gzip">IO::Compress::Gzip</a>.

The goal of the SPVM project within one year is to create a module to implement a web framework, GZIP compression is required for the ability to send and receive compressed content.


Translated with www.DeepL.com/Translator (free version)
Build Restaurant website
Tags: tailwindcss, javascript, html, beginners
Published: 2023-03-17 23:44:42

**tools:**

1. VS Code
2. Chrome browser
3. Tailwindcss
4. Javascipt
 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73201gkaoafmnuak9fey.png)** : https://www.instagram.com/mert93993/


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



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

**Source code **: https://github.com/mert-izgahi/bewelfed-template
**YouTube channel**: https://www.youtube.com/channel/UCyI4oPX78rkaIsYzL7uFhHA
**
Get ready for UGC -> AIGC
Tags: a16z, ugc, aigc, gamestack
Published: 2023-03-17 23:21:57

How GenAI will enable anyone to create games! The true democratization of game development is right around the corner.



- Generative AI refers to artificial intelligence systems that can generate new data, such as images, text, or even entire virtual worlds, based on the patterns and insights they have learned from existing data.
- The potential applications of generative AI are vast and include creative fields such as music, art, and fashion, as well as more practical areas like drug discovery, material science, and robotics.
- Advances in generative AI have been driven by a combination of improved algorithms, better hardware, and larger datasets, as well as the emergence of new approaches such as GANs (Generative Adversarial Networks).
- The development of generative AI is also creating new ethical and social challenges, such as the potential misuse of these systems for disinformation, the need to ensure diversity and fairness in generated content, and the impact on employment and the economy.
- To maximize the benefits of generative AI while minimizing the risks, it is important to prioritize transparency, accountability, and collaboration among stakeholders across different sectors, including academia, industry, and government.





Source: https://a16z.com/2023/03/17/the-generative-ai-revolution/
Testing a button with jest
Tags: javascript, beginners, react, jest
Published: 2023-03-17 22:29:40

Testing a button with Jest:
I`m going to explain how to test a simple button with jest in a react component.

We are going to start by coding the button:


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

The one above is gonna be out button where we are passing all the props from the last button to it, and also a title.


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

This is going to return as we run one test.
Now I`m going to take the code apart and explain it.

The first 3 lines i`m basically just importing the things i will need.

Then in order to start the test, we put test and then inside what we are about to test and afterwards an anonymous function to start the actual test.
We being with onClick = jest.fn() which is basically to represent the function.
Then we render the element with the function and a title.
After that we will take the button created to take it by getting the text we assigned to it before hand.
We are going to use the fireEvent.click(buttonElement) to mock the clicked by someone.
And finally we are going to put an expect(), and we expect to the button to be clicked 1 one time.

Hope someone found it useFul.

Lautaro
Embedding Files in an Executable - Linux/WSL2 - Part 1
Tags: c, cpp, wsl2, linux
Published: 2023-03-17 22:18:32

**1) Create data.txt**

```
echo "Hello World" > data.txt
```

**2) Convert data.txt to data.o**
```
objcopy -I binary -O elf64-x86-64 -B i386 data.txt data.o
```
**3) Get Symbols**
```
hexdump -C data.o
```
```
000000b0  00 5f 62 69 6e 61 72 79  5f 64 61 74 61 5f 74 78  |._binary_data_tx|
000000c0  74 5f 73 74 61 72 74 00  5f 62 69 6e 61 72 79 5f  |t_start._binary_|
000000d0  64 61 74 61 5f 74 78 74  5f 65 6e 64 00 5f 62 69  |data_txt_end._bi|
000000e0  6e 61 72 79 5f 64 61 74  61 5f 74 78 74 5f 73 69  |nary_data_txt_si|
000000f0  7a 65 00 00 2e 73 79 6d  74 61 62 00 2e 73 74 72  |ze...symtab..str|
00000100  74 61 62 00 2e 73 68 73  74 72 74 61 62 00 2e 64  |tab..shstrtab..d|
00000110  61 74 61 00 00 00 00 00  00 00 00 00 00 00 00 00  |ata.............|
00000120  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
```
```
_binary_data_txt_start
_binary_data_txt_end
_binary_data_txt_size
```
**4) Create main.c**
```c
#include <stdio.h>

extern char _binary_data_txt_start;
extern char _binary_data_txt_end;

int main(){
   char* p = &_binary_data_txt_start;
   while ( p != &_binary_data_txt_end ) putchar(*p++);
   return 0;
}
```
**5) Compile**
```
gcc main.c data.o -o myprogram
```
**6) Run**
```
./myprogram
```

## Compile windows exe

**1) Install**
```
sudo apt install gcc-mingw-w64-i686-win32
sudo apt install g++-mingw-w64-i686-win32
```
**2) Test**
```
i686-w64-mingw32-gcc --version
i686-w64-mingw32-g++ --version
```
**3) Convert data.txt to data.o**
```
i686-w64-mingw32-objcopy -I binary -O pe-i386 -B i386 data.txt data.o
```
**4) Get Symbols**
```
hexdump -C data.o
```
```
00000070  30 00 00 00 0c 00 00 00  ff ff 00 00 02 00 46 00  |0.............F.|
00000080  00 00 5f 62 69 6e 61 72  79 5f 64 61 74 61 5f 74  |.._binary_data_t|
00000090  78 74 5f 73 74 61 72 74  00 5f 62 69 6e 61 72 79  |xt_start._binary|
000000a0  5f 64 61 74 61 5f 74 78  74 5f 65 6e 64 00 5f 62  |_data_txt_end._b|
000000b0  69 6e 61 72 79 5f 64 61  74 61 5f 74 78 74 5f 73  |inary_data_txt_s|
000000c0  69 7a 65 00                               
```
**5) Remove initial underscores**
```
binary_data_txt_start
binary_data_txt_end
binary_data_txt_size
```
**6) Create main.c or main.cpp**
```c
#include <stdio.h>

extern char binary_data_txt_start;
extern char binary_data_txt_end;

int main(){
   char* p = &binary_data_txt_start;
   while ( p != &binary_data_txt_end ) putchar(*p++);
   return 0;
}
```
```cpp
#include <iostream>

extern char binary_data_txt_start;
extern char binary_data_txt_end;

int main(){
    char* p = &binary_data_txt_start;
    while (p != &binary_data_txt_end) std::cout << *p++;
    return 0;
}
```
**7) Compile**
```
i686-w64-mingw32-gcc main.c data.o -o main.exe
or
i686-w64-mingw32-g++ main.cpp data.o -o main.exe
```

###Part 2
https://dev.to/gurigraphics/embedding-files-in-an-executable-windows-part-2-3gja
React is a Framework, a Library, or both?
Tags: react, javascript, webdev, beginners
Published: 2023-03-17 21:52:01


React is a JavaScript library for creating user interfaces, but it can also be used as a Framework by importing some modules like Redux or React router DOM, so you can use React as both.

## Declarative

React helps you easily create interactive user interfaces. Design simple views for each state in your app, and React will take care of efficiently updating and rendering the correct components when the data changes.

Declarative views make your code more predictable, therefore easier to debug.

## Component Based

Create encapsulated components that handle their own state, and turn them into complex user interfaces.

Since the component logic is written in JavaScript and not in templates, you can easily pass data through your application and keep state outside of the DOM.

## Learn once, write it anywhere

In React, the rest of your technological tools are not excluded, so you can develop new features without having to rewrite the existing code.

React can also render from the server using Node, as well as power mobile apps using React Native.
PocketBaseUML
Tags: pocketbase, uml, diagrams, devtools
Published: 2023-03-17 21:40:00

---
title: PocketBaseUML
published: true
description: 
tags: pocketbase, uml, diagrams, devtools 
cover_image: https://user-images.githubusercontent.com/581999/225126356-d074ceb2-5139-419b-b93d-c4a62e3e8585.png
# Use a ratio of 100:42 for best results.
published_at: 2023-03-17 21:40 +0000
---
> "The PocketBase visual perspective"

If you think PocketBase is one of the coolest open-source back-end solutions out there, you might want to have a look at [PocketBaseUML](https://pocketbase-uml.github.io) — a free, open-source UML diagram generator/viewer that enables you to visualize your database architecture in a graphical form, easy to parse and understand in a quick glance.

PocketBase already comes with a fantastic UI (better than Supabase or Firebase, IMO), but I've always missed the ability to actually **SEE** the the collections and the references between them.

You can use the app online at [pocketbase-uml.github.io](https://pocketbase-uml.github.io/) to connect to any **HTTPS** PocketBase server, or you can run it as an `npm` package on your machine if you want to connect to a local PocketBase instance through **HTTP**, like so:
```sh
npx pocketbase-uml@latest
```
If you don't want to connect the app directly to a server, you can simply import a `collections.json` file exported from ypur PocketBase server to view it as an UML diagram.

The project is still in its early stage, there are new potential features to be added and I'll do my best to keep it in sync with new upcoming PocketBase features.

So, go on, have a look at it, give it a whirl and let me know in the comments if you find it interesting!

Also, if you find it interesting and/or you'd like to see new features added to it, don't hesitate to [sponsor my work](https://github.com/sponsors/icflorescu) on GitHub or drop me a line to hire my services :-)

[PocketBaseUML](https://pocketbase-uml.github.io) is not my only open-source project; I'm also the author of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/), [tRPC-SvelteKit](https://icflorescu.github.io/trpc-sveltekit/), [Expose-WSL](https://github.com/icflorescu/expose-wsl) and a few others. Dedicating time to build and maintain high-quality open-source projects requires a lot of time and energy, and your generosity would help a lot.

Thank you for taking the time to read and for your support!
Day 716 : Overcome
Tags: hiphop, code, coding, lifelongdev
Published: 2023-03-17 21:28:03

_liner notes_:
- Professional : Pretty chill day. Focused on working with a team member to finish refactoring a sample application. Was waiting for some stuff to be implemented. Once that was done, I was able to finish the demo. They liked what I did. Felt good to get that project done.

- Personal : Spent some time last night looking at financial investments. It's amazing the amount of taxes that get taken out when you get a bonus. Went through tracks for the radio show. Then I was able to pull data to the client side of my side project. Problem was that I wasn't able to use parameters to filter out the results. It kept bringing back all the data. Ran into a wall and went it was late so I went to bed.

![A tree covered dirt road in Kansas City, MO, USA with a wooden fence on the left with some sunlight coming through the leaves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d3gnywgvsw4ncn5721d.jpg)

Going to eat dinner. Work on the radio show. Shouldn't be too much since I put together a bunch of tracks in the previous weeks. Just need the tracks to start off the show and look up social media usernames. For my side project, I'll try and get the filtering working. If not, I'll try using a library from the company I'm using. Right now, I'm trying to do fetch requests, but I'm probably missing something. This is the reason companies create libraries. haha. In the end, I'll overcome the challenge. Definitely want to try and get in a couple of "Spy x Family" episodes before bed. May stay up a little later since I don't have work tomorrow.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube n5GLm6-cTUc %}
DOM, BOM and Virtual DOM
Tags: development, webdev, javascript
Published: 2023-03-28 12:53:19

---
title: DOM, BOM and Virtual DOM
published: true
date: 2023-03-17 21:19:53 UTC
tags: development,webdevelopment,javascript
canonical_url: https://marcellecode.medium.com/dom-bom-and-virtual-dom-a3d5c84d58f5
---

![](https://cdn-images-1.medium.com/max/1024/1*nrcmE4OqBvGQJjCL4s3ZSA.png)

Have you ever wondered how HTML, CSS and JavaScript interact in the browser? How exactly does this work and why do we hear so much talk about the DOM? That’s what we’re going to see in this article.

First let’s start by understanding what the DOM is. DOM is an acronym for Document Object Model which is a document generated by the browser when loading HTML and CSS. It is through this interface that we manage to manipulate the elements that are present in the HTML. The BOM is an interface that allows manipulating the elements that are part of the browser, such as the scrollbar, the window size (very useful when we think about responsiveness).

![DOM and BOM elements](https://cdn-images-1.medium.com/max/1024/1*2KhVXuiRiroKAXiLKlUG8g.png)

These two interfaces are generated when the browser loads files received from the server and allow our JavaScript application to manipulate what will be displayed. Dynamic cards, a screen pop, etc.

#### And the virtual DOM?

The virtual DOM is an intermediary layer between the application and the DOM used by newer frameworks like React and Vue. And why create a virtual DOM?

It serves to optimize our website and make changes to the DOM only occur when necessary. That is, let’s assume we have a list on our website that is updated based on user input. In applications that do not use this interface, the DOM is updated every time an input is made. In applications that use this interface, before updating the DOM directly, the framework makes a copy of the elements in memory and then compares it to see if it is necessary to update the DOM.

[![](https://cdn-images-1.medium.com/max/1024/1*zSlmbnW3H33dMzqtil75cA.png)](https://www.buymeacoffee.com/marcellecode)
It's all a matter of time.
Published: 2023-03-17 21:19:43

Staying organized is often one of the greater challenges a team can encounter. I feel an apprenticeship position allows for the demonstration of persistence by focusing on not only the end goal but the journey of the program. Having well-defined roles, schedules, and tasks is how members of a cohort can ensure they stay on track to the completion of their goals in the program.
User Stories evaluation acronyms in agile software development teams
Tags: agile, user, stories, scrum
Published: 2023-03-17 21:16:20

When working in an agile-ish software development team you will come to the part where, as a team, you will need to prioritize and decide how to split the user stories for your current Sprint. For these purpose there are widely accepted steps to take, that act as a checklist that will add up in quality and will favor clarity and visibility for the whole company; product, engineering, business teams.

> These criteria for evaluating User Stories is summed up into two acronyms, INVEST and SMART.


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

Additionally the following suggestions can be considered as guidelines to split user stories :

- **Functional size**: Amount of work required to complete the story. This can be measured in terms of the number of features or tasks that need to be completed.
- **Business value**: Value that it provides to the end user or customer. This can be measured in terms of the benefit that the user will receive from the completed story.
- **Risk**: Likelihood that the story will not be completed as planned. This can be measured in terms of the uncertainty or complexity of the work involved.
- **Dependencies**: Tasks or features that must be completed before the story can be started. These dependencies can be internal to the team or external to the team.
- **Time constraints**: Deadlines or due dates that must be met in order to complete the story. These constraints can be imposed by the team or by external factors such as customer deadlines.
3 books you can read to learn python completely
Tags: python, programming, tutorial, beginners
Published: 2023-03-17 21:01:02

Hello everyone, today I want to introduce Python books to you.


**1.Python crash course**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34mljt9qmvlx83ak08vy.jpg)

This book teaches you python from basic to pro + Django + Pygame.

 
**2.Learn python the hardway**

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

This book teaches you Python. But this book teaches you a lot in difficult language.


3.Clean Code

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

This book is very good for programming.


Thank you for reading this post.
See how to customize a developer workflow using SDKs and a Developer Control Plane [upcoming webinar]
Tags: webinar, productivity, tooling, platformengineering
Published: 2023-03-17 20:50:56

Hi devs!

Next week I'll be hosting a webinar to talk about **How to use CTO.ai’s open-source SDKs to create customizable Workflows for software delivery**.

You can learn how to create personalized dev's workflow using the SDKs with the Developer Control Plane, which I'm going to show you on the presentation.

Here's what's in the agenda:

✅ What workflows stand for
✅ What are the open-source SDKs available to get started
✅ How to use them (examples of usage in a real-life environment)
✅ How can these SDKs integrate with third-party tools for product delivery?
✅ Using SDKs to calculate DORA metrics in your project
✅ Q&A

Join me at this webinar!

It's scheduled to happen next week, **March 22nd, at 4 PM EST.**
You can [subscribe using this link](https://cto-ai.zoom.us/webinar/register/WN_cvrr1hhsSW2eHX4BXtnQtg).

See you there! :)