teleren/devto huggingface dataset:
Sally Acorn's first post
Tags: webdev
Published: 2023-07-26 23:30:48

> Sally Acorn is back with a brand new post and its an intro

**What projects are currently occupying most of your time?**
I currently occupying most of my time with coding and JavaScript.

**What kinds of collaborations or discussions are you available for? What's a good reason to say Hey! to you these days?**
I am available for helping other people in the community

**What are you learning right now?** 
- What are the new tools and languages you're picking up right now?

I am still learning coding and tools and languages that I've picked GitHub and python
TIL 4.5
Published: 2023-07-26 23:29:32

Flexbox
```
div.container {
  display: flex;
}
```

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



Inline-flex:
```
display: inline-flex;
```

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

Justify-content:
```
.container {
  display: flex;
  justify-content: flex-end;
}
```

flex-start
flex-end 
center 
space-around 
space-between

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

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

Align-items:
```
.container {
  align-items: baseline;
}
```

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

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

Flex-grow:

```
.center {
  width: 100px;
  flex-grow: 2;
}
```

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

Flex-shrink:

Pretty much the opposite of grow.

Flex-basis:

Another way of specifying the width of a flex item is with the flex-basis property. flex-basis allows us to specify the width of an item before it stretches or shrinks.
```
  flex-basis: 150px;
```

Flex shorthand :

Flex: grow shrink basis
```
.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}
 
.small {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 100px;
}
```
vs

```
.big {
  flex: 2 1 150px;
}
 
.small {
  flex: 1 2 100px;
}

```

Flex-wrap:

wrap 
wrap-reverse
nowrap 
```
.container {
  display: inline-flex;
  flex-wrap: wrap;
  width: 250px;
}
```

Flex-direction:

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkj6pjdmdletbkgejymw.png)
Today I learned
Tags: codespace, beginners
Published: 2023-07-26 23:16:19

I am finishing up with my linktree project and starting RUBY.

I thought this was a great assignment to review everything we have learned about HTML and CSS.

Some key points when creating a link tree:

CSS portion is in the beginning in the <head>
HMTL is second in the <body>

Make sure to commit changes! I think I found a way to automatically commit them! :)

Rake grade will grade the simple specs

An html document will only have 1 head and 1 body

Head= links, titles, and rules
Body= what gets rendered in the browser

target=_blank is for links and when you want something to open in a new tab

W3C HTML Validator can be used to check any mistakes you may have

<style> is used to formatting and making your page look good

Can deploy in Github or fly.io

Excited to continue with Ruby, hope everyone has a great day!
Ohio State Coding Boot Camper!
Tags: beginners
Published: 2023-07-26 22:56:04

Hi All,
Today I am reviewing some HTML code, to get back into the swing of things for the Ohio State University Boot Camp. So far doing the pre-work I learned the basics of computing, different blog sites of well known developers in their respected fields. I am enjoying the Web Developer social space so far. I discovered 3 Web developers/Engineers who's Twitter and IG pages I am currently following.

I also learned of some new Web Developer and Software Engineer Blogs to follow from the provided/suggested list in the Pre-Work. I selected my top 3 and they are rooted in web design and software engineering. I love to design and put aesthetics together but also have a passion for learning how things work!
How to build openssl when you broke it.
Published: 2023-07-26 22:55:54

```bash
# Step 1: Update your system
sudo apt update

# Step 2: Install required dependencies
sudo apt install build-essential

# Step 3: Download and extract OpenSSL source
wget https://www.openssl.org/source/openssl-1.1.1l.tar.gz
tar -xf openssl-1.1.1l.tar.gz
cd openssl-1.1.1l

# Step 4: Configure and build OpenSSL
./config
make
# Step 5: Test that everything works
make test

# Step 6: Install OpenSSL
sudo make install

# Step 7: Verify the installation
openssl version
```
Select the best GUI toolkit – part 7: pyQt
Tags: toolkit, comparison, gui, qt
Published: 2023-07-26 22:36:33

And finally we reach the end... that is the last of the GUI framework I decided to experiment... pyQt.
<!--more-->
PyQt was developed by the Qt Company and is the base for the KDE, one of the desktop environments used by Linux. 
Its development started in 1990 and was since it's beginning a C framework conceived to provide a common abstraction layer able to render a GUI in different platforms. A complete history can be found in the [wikipedia article](https://en.wikipedia.org/wiki/Qt_(software)#History_of_Qt).
Like WxWidgets, Qt is originally conceived to be a C++ framework, but now as many bindings on other languages, like this [list](https://wiki.qt.io/Language_Bindings). It has ports to almost all operating systems, like Android. Is much probably the most supported GUI framework in different platforms. It started as a GUI framework, but it has grown to be added support for extra stuff like network, mouse, audio, etc. There is a [list of all features here](https://www.qt.io/product/features).
There are two ports of Qt in Python: PyQt and PySide. The first is the original branch comes from the licensing made by the owner of Qt: the Qt Company. The second was created by Nokia when was the licensee of Qt, since it wanna develop software using a different licensing, but Qt Company refused, and so Nokia forked the framework. The code require minimal modifications in order to use one or another, usually it suffices to change the imports from `PyQt` to `PySide`.
There is a visual designer for Qt when you can build the GUI from the grounds-up using drag and drop widgets from a tool
bar. [QT Designer](https://doc.qt.io/qt-6/qtdesigner-manual.html) is free and can be installed along with Qt/PySide.
Qt has a [staggering number of widgets](https://doc.qt.io/qtforpython-6/overviews/widget-classes.html), all descending from the basic class `QWidget`. Almost everything you need is on those classes, I used a `QListView` to build the main panel. For every item in the list there was a `QStandardItem` which represents an Icon which is added to a `QStandItemModel` which is the model to which you add the items.
Dragging and droping the icons inside and from outside or to inside can be implemented through several `drag*`and `drop*` methods in the `QListView` class. To bind widget events with methods you use the `.connect` method to associate them, passing the name of the method to deal with the event.

The program was developed and tested on Windows, and on Mac, because of the separation between icons and executables it required changes to deal with the specificities of each platofrm. There is, the code is not imediatelly portable between platforms.

![QtAppMenuLauncher on Mac](https://codehouse.digfish.org/wp-content/uploads/2023/07/mac-running-qtappmenulauncher.jpg)

The source code for this implementation is available at [GitHub](https://github.com/digfish/QtAppMenuLauncher).
Processes in PostgreSQL - Internal of PostgreSQL
Tags: postgres, database
Published: 2023-07-26 22:23:56

PostgreSQL might be one of the most commonly used SQL Database in present. In rose in popularity for its convenient use, faster query execution and easy to understand syntax. 

But... 

Few know about the extremely complicated depths of this exciting database. In this article we will be focusing on **different processes** in PostgreSQL. 

## Overview
PostgreSQL follows a client/server mechanism, and has a multi-process architecture. There are different kinds of underlying processes running concurrently. 

## Different Processes in PostgreSQL 
**1. Server Process**
This process is the parent of all running processes. It is the first to start, and it initiates all other process as its child processes. 

- Runs on default port **5432**.
- Initiates all other processes.
- Referred as "postmaster" in previous versions. 

**2. Backend Process**
Commonly referred as "postgres", this process handles all the queries and communication of connected clients. 

- You need to specify database to establish connection. 
- It is connects to clients by a single TCP connection. 
- Single process can work on only one database. 

**3. Background Process(es)**
Each new function creates a separate background process of its own. There might be more than one background processes running at a single instance. 

**4. Replication Process**
Replicating databases is quite common. Replication process is created on replicating your database. 

- This process is responsible for maintaining a consistency in all replicas of your database. 

**5. Worker Process(es)**
These are user created processes that are responsible for one or more functionality in your database. 

- User can customize functionalities of these process as per need.
How I approximated a function f(x) using an image as input
Tags: datascience, beginners, python
Published: 2023-07-26 22:04:17

Recently I was reading [this scientific paper](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4462042/) and came across this graph:

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

In a first glance it looked pretty much like a gamma distribution. Using [scipy's gamma function](https://docs.scipy.org/doc/scipy/reference/generated/scipy.stats.gamma.html) I could create a similar curve using two parameters: the shape and scale. If the data in the graph was a truly gamma these would suffice but as they have other meanings in each scale I also needed a third parameter to take account for the y-axis range

As the data is not provided with the graph I was able to approximate it using [PlotDigitalizer]( https://plotdigitizer.com/app) which is a web solution that allows to upload a graph and, given the axis scales, estimates the points on the graph.

With this data I was able to minimize my desired function using the [curve_fit](https://docs.scipy.org/doc/scipy/reference/generated/scipy.optimize.curve_fit.html)

```
from scipy.optimize import curve_fit
import numpy as np
from scipy.stats import gamma

def func(x, a, b, c):
    return gamma.pdf(x, a, scale=b)*c

popt, pcov = curve_fit(func, df['x'], df['y'])

popt, pcov

>> (array([2.38845754e+00, 4.14949111e+01, 1.65402740e+04]),
>> array([[ 3.66739537e-02, -9.02425608e-01, -7.11863037e+01],
        [-9.02425608e-01,  2.56723468e+01,  2.87599647e+03],
        [-7.11863037e+01,  2.87599647e+03,  9.93779351e+05]]))
```

And then plot it using the plotly library

```
import plotly.graph_objects as go
import numpy as np
from scipy.stats import gamma

#1 ml of 1,4-butanediol is equivalent to 1.4 g of Na-GHB.

x = np.linspace(0, 600, 100)
y = gamma.pdf(x, a=popt[0], scale=popt[1])*popt[2]

fig = go.Figure(data=go.Scatter(x=x, y=y))

# Add data from the dataframe df
fig.add_trace(go.Scatter(x=df['x'], y=df['y'], mode='markers', name='original'))

# Edit the layout to add title, and change x and y axis labels
fig.update_layout(title='GHB Concentration in Blood', xaxis_title='Time (min)', yaxis_title='Concentration (mg/L)')


# Edit the layout make the width of the graph 600px
fig.update_layout(width=500)
fig.show()
fig.write_image("fig1.png")
```

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

In this example I wanted to approximate my data as a gamma function but in reality it could be any given function with any set of parameters. The curve_fit uses non-linear least squares to fit a function f. If I didn't had a function in mind I could use other machine learning techniques to obtain generic approximations and have a better guess on which approximations to use.
Vercel AI SDK Walkthrough
Tags: programming, webdev, nextjs, vercel
Published: 2023-07-26 21:58:51

### Implementing Vercel's AI SDK as a component

**Requirements**:

1. Knowledge of Next.js v13+ (App directory) 
2. React/TypeScript (preferred)
3. Intermediate level JavaScript knowledge

**Documentation can be found [here](https://vercel.com/blog/introducing-the-vercel-ai-sdk)**

In this video, I showcase how to implement Vercel's AI SDK into your web app as a component. In order to achieve this with Vercel's SDK, you will need to use Next.js. 

I bootstrapped a project,

![Carbon copy of npx code used to create a next app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9tfaosri9umhgkjgxbp.png)
but you can also add the dependencies manually if you have an existing project that is not already using Next.js.

#### Getting Started

Once you have your project layout, install the dependency necessary to implement the SDK

![Carbon copy of the code used to install the necessary dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxok79ahejdjw3wugg6q.png)

Then, create your server side API @ root/api/chat/route.ts _(or route.js if you are not leveraging TypeScript)_

Inside this component, you will find all the code necessary for your server side API call 

![Carbon copy of the server sided API call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwsx4rtxk5q3su67c8e6.png)

Excellent! Now we just need to create the component to showcase the new LLM on our site. 

At the root level of your layout, or in a components directory or wherever, you will create a component, Chat.tsx, which will handle your client side information.

![Carbon copy for client side API call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/albqbsukfj3irzalatv8.png)

Implement your client sided functionality, and there you have it. You have created a component that holds jsx for a form. Inside the form, users can type out an input, and click send. Submitting this input to the API is done through the useChat hook that is imported and provided to us. 

Essentially, we are just adding an interface to which we can string responses from OpenAI's Chat-GPT via an API call.

**Keep in mind, this does cost money**, which is why I leverage the _3.5 turbo model_. User input is transferred to tokens and charged to your account via your apiKey that is added in the server side API.

**Another FYI**
Add your .env.local file to your .gitignore file if you are leveraging a GitHub repository for your project. This will keep you safe from potential malicious attacks on your apiKey, resulting in charges to your credit card.

On Production, you will need to add your environment variables to whatever service you are deploying with. Vercel makes it exceptionally easy to deploy, which you can check out [here](https://vercel.com/docs/concepts/deployments/overview).
Day 791 : Trickle
Tags: hiphop, code, coding, lifelongdev
Published: 2023-07-26 21:36:28

_liner notes_:
- Professional : Met with my manager and had him check out some demos and documentation I've been working on since our last meeting. Everything worked and he likes where things are going. Cool. Also learned today that I have to disconnect from SIP connections or they will keep going. Reason I learned is because yesterday I have credits in my developer account and today there was none. haha. I think the issue may have come from the demo I'm building connecting to a SIP call and when I change some code and the page refreshes, the connection is still going. I'm looking for ways in the demo application to make sure that the developer knows to disconnect and maybe do something in the code. Maybe a timer or something. Pretty much spent the day looking through documentation and coding.

- Personal : Last night, I went through tracks for the radio show. Got caught up with some things for trying to buy this land. It takes way more than I thought it would. Getting close though, hopefully. Didn't do much on my side project. I think I was still tired from getting up super early. Watched a couple of episodes of "Promised Neverland" and went to sleep.

![Mountains in Banaue, Philippines with terraces carved into them and a bunch of trees](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubpq7yi4ulifbldatzh0.jpg)

So I bought a device that is supposed to trickle charge my van's battery so that it doesn't die because I don't drive around much. I plugged it into the cigarette lighter socket, but it didn't seem to work. I think it could be due to the socket not being live when the engine isn't on. I've been doing some research on how to make it work. We'll see. It's starting to rain a little so I won't be able to look under the hood at the fuse box. Going to eat dinner, go through tracks and maybe start working on the front-end of my side project. I think the last episode of "Secret Invasion" is out tonight. Going to watch that and maybe a couple of anime episodes.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube m-tlzYm35QI %}
Introducing Search’In: Search Anything in live Python Code with Ease!
Tags: python, programming, productivity, pypi
Published: 2023-07-26 21:33:06

Have you ever found yourself desperately searching for that one elusive method or variable in a complex Python codebase? You know it’s there somewhere, but it seems to be playing a game of hide-and-seek, leaving you frustrated and wasting precious time scrolling through pages of documentation and source code.

![Search'In logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf55vq02s96gwkhx8qg0.png)


## What is Search’In?
Search’In is a tool that allows you to search in live python objects as if you were on Google, just by adding a line in the middle of your code !

To begin, you’ll need to install Search’In using `pip`:  
`pip install searchin
`

Import it into your Python code with just one line:  

```python
import searchin
```
Imagine you have a `Human` class, and you're searching for the method or variable named "name." Just do:  

```python
searchin(Human, "name")
```
> _No, you’re not hallucinating: the module is the function. 11 characters saved ;-)_

You can search for any string in **any python “entity” : variable, method, object, class, module, etc**.

Search for `"5"` in a `tuple`:  
```python
searchin((1, 2, 3, 4, 5, 6, 7, 8, 9), "5")
# >>> "5" found in root.4 : 5
```

Search for `"mean"` in the method `torch.nn.functional.cross_entropy`:  

```python
searchin(torch.nn.functional.cross_entropy, "mean")
# "mean" found in cross_entropy. : def cross_entropy( [...] reduction: str = "mean", [...], label_smoothing)
```

Search for `"grad"` in a `torch.nn.Module`:
```python
model = torch.nn.Linear(10, 10)
searchin(model, "grad")
# "grad" found in model.bias
# "grad" found in model.requires_grad_
# "grad" found in model.weight
# "grad" found in model.zero_grad
```

Hope this will be useful to you! ==> [https://pypi.org/project/searchin/](https://pypi.org/project/searchin/)

The project could have a lot more useful functionnalities. Contributions are welcome! ==> [https://github.com/NicolasMICAUX/searchin](https://github.com/NicolasMICAUX/searchin)

_Maybe this new tool is similar to existing ones, that I’m not aware of ==> if so, [I would be happy to know which](https://github.com/NicolasMICAUX/searchin/discussions) :)_
Understanding 502 - bad gateway ngnix
Tags: nginx, webdev, django
Published: 2023-07-26 20:55:15

Hi! I have a web application that I've been making changes to and updating - this issue is somehow one of the changes caused 502 errors and I was able to fix the issue but ever since then I get strange 502 errors through different (random) links on the site. When i refresh and clear cookies and cache it solves itself ... only to come back again. It works completely fine in chrome incognito and completely fine in safari and firefox. interestingly it also works fine on chrome browsers that had never opened the site before either. It throws 502 errors on devices that had previously visited the site. I'm not sure how to fix and approach this?
The 45th Day of the 100 Days of Code Challenge
Published: 2023-07-26 20:49:45

Hey everyone!

Today, I finalized the first working version of the real-time transcription app I've been working and I made a pull request. It's looking great, I mostly worked on the installation script and made sure that the onboarding experience would be smooth for new users. There are still some more tests to run in different environments but it's promising overall.

I am lucky to be working with a guy (the owner of the repo) that's all for this project who left me a very detailed code review that I'll be working according to tomorrow.

I also worked a bit on the bot that automatically makes reservations using ChatGPT using Twilio, I made it so that synthesized audio generated with Google's TTS service can be played in the call, the difficult part was getting the media payload to fit Twilio's requirements, but some quick inspiration from Stack Overflow solved it.

Now, the more difficult part is implementing VAD to be able to tell when the recording of the other party needs to start. For some reason, RMS and Energy-based approaches didn't work quite well, I suspect that the audio chunks undergo some normalization process before being sent by Twilio, which could  be causing this. webrtcvad wasn't too promising neither, and the chunks are only 20ms long. Will try using [Silero VAD](https://github.com/snakers4/silero-vad) that's been proven to work quite well with chunks that are 30ms long at base level.

That's it for today, hoping for a productive day tomorrow!
Happy coding everyone :)
Bandit Level 6 Level 7
Tags: bandit, ctf, overthewire, writeup
Published: 2023-07-26 20:45:23

### Introduction

Bandit 7 is the eigth level of the OverTheWire Bandit wargame. In this level, we will learn how to search for files by owner and size.

### Steps

1. Open your terminal application.
2. Enter the following command to ssh into the remote server:

```
ssh bandit6@bandit.labs.overthewire.org -p 2220
```

1. You will be prompted to enter a password. Enter the password from the previous level: `P4L4vucdmLnm8I7Vl7jG1ApGSfjYKqJU`.
2. Once you're logged in, run the following command to search for files that are 33 bytes in size and owned by user `bandit7` and group `bandit6`:

```
find / -size 33c -user bandit7 -group bandit6 2>/dev/null
```

1. This will output the location of the file. Use the `cat` command to read the contents of the file:

```
cat /var/lib/dpkg/info/bandit7.password
```

1. You should now see the password for the next level which is `z7WtoNQU2XfjmMtWA8u5rN4vzqu4v99S`.

Congratulations! You have successfully completed Bandit 7 and obtained the password for the next level.