teleren/devto huggingface dataset:
My Journey into Frontend Freelancing
Tags: freelance, webdev, frontend, beginners
Published: 2023-08-10 17:16:01

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

A little over a year ago, I bid goodbye to the regular nine-to-five grind as a full stack developer. My journey began with an abundance of motivation, pushing me to dedicate long hours and pouring hard work into my job. I was making strides, and things seemed promising.

But as the saying goes, "all good things come to an end." I decided to chase a dream - setting up a business of my own, leveraging the skills and knowledge I'd accumulated over the years.

The initial stages of freelance life were encouraging. I hustled, found clients, and landed some projects. Everything seemed to be going smoothly until I stumbled upon a project that starkly highlighted my inexperience.

At a corporate job, there's a safety net. There, I learned how things "should" work, but the actual doing was often a collective effort. I worked on solo projects but didn’t grasp the entirety of a project’s lifecycle, from conception to handing it over to developers.

Being a solo developer means wearing all hats. While I was aware of this, experiencing it firsthand was a different ball game. As a developer creating a product, my skill set needed to be vast. When challenges arose, I had to have the answers. When things went awry, the buck stopped with me.

But every cloud has a silver lining. The satisfaction of completing a project, knowing users are deriving joy from it? It's an incomparable high!

Then there was *that* project—the one that threw me into the deep end. The one where the tech was unfamiliar, and I felt out of depth. It ended up being a lesson in humility. However, the growth I experienced in the subsequent months was exponential—greater than years spent in a structured company environment.

This solo venture broadened my horizons. Now, I can confidently say I deliver better projects, ensuring clients feel they've gotten their money's worth. My communication skills have improved, and I've mastered the art of setting realistic goals.

As my father wisely put it: "You know you've struck a good deal when everyone's happy."

This journal marks the beginning of my story-sharing. I aim to keep things casual and spirited, offering insights from my freelance journey.

I'm eager to hear from others. What experiences propelled you to grow and be better?

Until we meet again on these virtual pages! 🙂
UI Fundamentals
Tags: ui, webdev, ux, programming
Published: 2023-08-10 17:03:55

## Introduction

In order to give my brain sometime to figure out a solution to the problem I addressed in my [previous post](https://dev.to/aldoportillo/cookie-limit-58eb). I have started taking the [Design Course](https://designcourse.com/) UI/UX course

Design Course is a bit underwhelming. The main focus is using Figma to create designs by following videos. There are independent projects to practice what you've learned; however, there is a $50/month fee to get these graded on top of the initial $100 price of the course. All in all, you pay $100 for videos and an opportunity to pay $50 for actual feedback. I understand that with a highly subjective field such as UI/UX it would be very difficult to auto grade. Luckily, Figma has a lot of plugins that check if you are properly following UI fundamentals.

## UI Fundamentals

1.White space:
White space is dependent on space availability (view-port), number of components, alignment, and consistency. This is highly subjective.

2.Contrast
Contrast separates elements off color opacity. This needs to follow UCGA guidelines. UCGA guidelines are as follow:

- Large text is considered 14 point (18.66px) bold or 18 point (24px) not bold. Small text is everything smaller than large.🫥
- Small Text needs to have a mid-range contrast (AA) of 4.5:1 or high contrast (AAA) of 7:1.
- Large Text needs to have a mid-range contrast (AA) of 3:1 or high contrast (AAA) of 4.5:1.

3.Scale
Text should be no smaller than 16px. Focal points need to be larger.

4.Alignment
Elements should follow some sort of consistent alignment. The column of alignment can be subjective; however, more columns is typically caused by poor alignment.

5.Typography

- Tracking: space in between letters. This can be higher for titles, labels and watermarks but everything else should stick to default
- Leading: space in between words vertically and horizontally
- Font-style: font must match tone of the words or the message.
- Font-weight: For visual hierarchy.

6.Color

Should use no more than 3 hues: primary, secondary, and accent color.
Should illicit an emotional response

###### Color Attributes

- Hue: full color saturation (color picker)
- Tint: lightness
- Shade: darkness
- Tone: greyness

###### Color schemes

- Monochromatic: set hue with different tint, shade, and tone
- Analogous: Next to each other in hue
- Complementary: Opposite of each other in color wheel

7.Visual Hierarchy
Highly subjective but not at the same time. This uses all the previous rules to make certain parts of the page stand out more than others. Everything has a visual hierarchy even the human face: eyes, smile, eyebrows, nose, ears. It reminds me of [this image](https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2F7jyqh5ej9nl31.jpg). Your page should work the same way.
I reviewed 1,000s of GraphQL vs. REST perspectives
Tags: graphql, openapi, rest
Published: 2023-08-10 16:50:54


In the ever-evolving landscape of API design, developers often find themselves at a crossroads: GraphQL or REST? Having reviewed thousands of perspectives on this topic, I'll share insights that cut through the noise and help you make an informed decision.

Read more here: https://konfigthis.com/blog/graphql-vs-rest
Get Class Name in Typescript
Tags: typescript
Published: 2023-08-10 16:48:43

We don’t get a lot of information using `typeof` in JavaScript or TypeScript. At most, it tells us whether a value is `undefined`, `number`, `string`, or `object`. If you want to get the class name using a function, you can use the following extended version of `classOf` that is originally from “JavaScript: The Definitive Guide”:

```tsx
function classOf(obj: unknown) {
    if (obj === null) return "Null";
    if (typeof obj === "undefined") return "Undefined";

    if (typeof obj === 'object') {
        // Warning: this won't work if your Typescript is minified and class names are mangled.
        return (obj as object).constructor.name;
    }

    if (typeof obj === 'function') {
        // Warning: this won't work if your Typescript is minified and function names are mangled.
        const possibleName = (obj as CallableFunction).name;
        if (possibleName) {
            return possibleName;
        }
    }

    return Object.prototype.toString.call(obj).slice(8, -1);
}

console.log(classOf(null)); // "Null"
console.log(classOf(undefined)); // "Undefined"
console.log(classOf(1)); // "Number"
console.log(classOf("foobar")); // "String"
console.log(classOf({})); // "Object"
console.log(classOf([])); // "Array"
console.log(classOf(new Date()))

class Test {}
console.log(classOf(new Test())); // "Test"

function test() {}
console.log(classOf(test)); // "test"

console.log(classOf(function () {})) // "Function"
```

[Playground Link](https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABBANgQwM4YPLABRwBGAVgFyLgDWYcA7mAJSIDeAUIh4jMIgSYgF4hiMCBQomAJwCmUEJKQAiAHJiUigNztO3XlACeAB2lweRYoOGLwAE2nAYYaTcVTZ8pQFUwdh05da2hy6eAbGpojmlgKIAOTm0tCxTGycaYgA9BmIAOpoCo4A5uRQABYwGIi0CLFQVXCSlFw8+nDyiAAqRtIYEJIwhnUViAC2jtwwzohoPsjoWCJoIz3TMqMzhSjOAHRB6TJyCrxRmJEkiVAM2xAIGFCSINAN22BL0lppAL6seyFhJmZ+EIYrFQJBYDUUns0llcvkwEUSuVKtUwLV6o1mohWu0usZev1BlxKmMEQ4pjMbIgwdB4EhXstKvlpOswJsdtDODcwHdEIY4FgYIQtso3oJjvxTgBhNDiNDC6QAMXAtIQVwZ705wR4eH5goVouWUPSJsQBw8fIFGCFIreH1N3y+PzS5qO2HO0G2hkkcCgvu62z9AGV7kVrrKUHxiFcMCgYBBpHgABwAGkQAFoAIwMLTfVjcjBwLbbFBwQp4VCYHD4UTiBg5zLZFRqRT525F6QlssV+bVvC2eyOZz1jSNxCKby+IcuNs8jtd8uVrC4PDZhuw5sjQjSSStgvz0uL3srxTAOBEfKuddNkP9Nl79vFw89qsr5ifEdjxTu4gXB9zp9uyXPsAG0AF1Pw3ABBSRJDQfR-0LQCj1fGtpFoRAABE0CgRN6wYH5gM6Ho6nfWckM7Z9gJXJwMI6Ei8Hw0cN3ou5W1YGkISQXC7kYlhvn3ZCX2XfAeMua9xzE9jBMooDj3wTi6V4FIPyYDdlXBOlFCAA)

This `classOf` function works for any value, including numbers, strings, booleans, classes, and functions. It will return the best name for that given value that is passed. If the object has a constructor name, that value will be returned. If that value is a function, the name of that function will be returned.

## Takeaways

Unfortunately, during some transpilation steps or code compression, these names get mangled or removed completely, so it’s best not to rely on the class’s actual name directly. Instead `instanceof` should be used, or a static name attribute that cannot be modified.
How to install PDlib on your Server💻 (EASY)
Tags: tutorial, ubuntu, cloud, programming
Published: 2023-08-10 16:48:28

If you like our articles, we would appreciate a like and a comment!

---
Today we will show you how easy it is to install PDlib. You need this, for example, for face recognition in NextCloud, as in this article: [Face Recognition in NextCloud • Schächner (xn--schchner-2za.de)](https://technik.schächner.de/blog/2023/08/08/face-recognition-gesichtserkennung-in-nextcloud/).

---

If you want us to help you with the installation, please write to us!

---

You can also use it to fix the following error: App "Face Recognition" cannot be installed because the following dependencies are not fulfilled: The library pdlib is not available.

But let's start right away:

First we edit a file:

`sudo nano /etc/apt/sources.list.d/20-pdlib.list`
There we need to add the package source at the end:

```
deb [signed-by=/usr/share/keyrings/delellis-archive-keyring.gpg arch=amd64] https://repo.delellis.com.ar jammy jammy
```
After that we download the key with this command:

`wget -O- https://repo.delellis.com.ar/repo.gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/delellis-archive-keyring.gpg`
That was the hardest part.

Now we still lead

`sudo apt update`
out and then we can take the package with you

`sudo apt install php8.1-pdlib`
to install.

Now we install PDlib "again" (specifically for the Face Recognition App):

For this we need some dependencies again

`sudo apt-get install libx11-dev`
`sudo apt-get install libopenblas-dev liblapack-dev`
`sudo apt install cmake`
`sudo apt install php-dev`
Then install the shared library (Dlib):

`sudo git clone https://github.com/davisking/dlib.git`
`cd dlib/dlib`
`sudo mkdir build`
`CD build`
`sudo cmake -DBUILD_SHARED_LIBS=ON ..`
`sudo make`
`sudo make install`
Now for the actual installation:

`sudo git clone https://github.com/goodspb/pdlib.git`
`cd pdlib`
`sudo phpize`
`sudo ./configure --enable-debug`
`sudo make`
`sudo make install`
So. We're done with the installation. 🥴

Now you only have to go into the php.ini file under the point ; dynamic extensions ; add the following content:

`sudo nano /etc/php/8.2/cli/php.ini`

```
[pdlib]
extension="pdlib.so"
```
We're still testing that

`sudo apt-get install php-bz2`
`sudo make test`

Good luck and have fun!
Thanks for reading, Schächner
JS Challenge: Sum of the values of an object's properties
Tags: javascript, javascripttips, jschallenge, oneliners
Published: 2023-08-10 16:45:25

---
title: JS Challenge: Sum of the values of an object's properties
published: true
description: 
tags: javascript, javascripttips, js, jschallenge, oneliners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-10 15:43 +0000
---

Steps involved:

1. Get the object's values into an array using `Object.values()`
2. Use `Array.prototype.reduce()` to find the sum of the values

```js
expenses = {grocery: 23.45, cleaners: 17.88, uber: 12.25, tip: 2.00}
Object.values(expenses).reduce((total, value) => 
  total + value, 0
) //returns the sum of values -> 55.58
```
TIL #2
Published: 2023-08-10 16:40:44

######This post should have been posted on Aug 02. Forgot to make the link public.

Today I finally started learning Ruby in the course provided by Codecademy. I am very positive that I will be able to learn and master Ruby. It is very similar to Python which was my first self-taught coding language back in 2018. 

The only bad habit that need to shed is to not use parentheses when I am printing.


```
#Python 3
message = "Hello World!"
print(message)
```

```
#Ruby
message = "Hello World!"
puts message
```
Perl script to search for large primes
Tags: perl, linux, security, programming
Published: 2023-08-10 16:28:40

Experimental code to search for random probable primes for research. 

The code will create multiple instances of the randPrime_thread.pl script which will search for a random prime starting with a random number. Note that each of the perl scripts run has its own threads. sleep calls are needed so as not to overheat the processor. The processes should end when one of the threads writes a file:

.randPrime.search.done

And this happens when one of the threads discovers a probable prime. At the same time, the discovered prime is written to the ./data directory. 

The largest prime generated so far was 9800+ digits large.

You can control the size of the prime you are looking for by specifying the number of bits.

The code and data are [here](https://github.com/OXKernel/randPrime).
Dynamic datalist in filamentphp 3
Tags: filamentphp, laravel, php, html
Published: 2023-08-10 16:24:19

Revised version , thanks Filament Team  !! 

{% embed https://twitter.com/filamentphp/status/1689709474896834563?s=20 %}


The new version of filamentphp allow the updating of datalist tag in TexInput with new methods. Some tricks are needed but is possible to load datalist options from the database based on the characters inserted in input field.
The tricks:
->autocomplete('off') avoid browser tips
->**live**(debounce:400) activate sending info to the server
->**datalist**(function (?string *$state*, TextInput *$component*,?Model *$record* , *$modelsearch*='\App\Models\Metadata' , *$fieldsearch*='content') {
            
  $options=  $modelsearch::whereRaw($fieldsearch.' ilike \'%'.$state.'%\'')->limit(20)->pluck('content')->toarray();
 
    
   })

All the code (simplified) 

```php
Forms\Components\TextInput::make('title')->label('Campo')
                ->live(debounce:400)
                ->autocomplete('off') 
                ->datalist(function (?string $state , Forms\Components\TextInput $component,?Model $record , $modelsearch='\App\Models\Metadata' , $fieldsearch='content') {
//get options from database using where and (ilike I'm a postgresql fan)
$options =[];
   if($state!=null  and Str::length($state)>=3){
                    $options= $modelsearch::whereRaw($fieldsearch.
' ilike \'%'.$state.'%\'')
->limit(20)
->pluck('content')
->toarray();
               //send options to datalist
                    
}
return $options; 
                })
                
```
Btw : PHP 8.0: Named Parameters **ROCKS**
TIL - Phoenix Router 1.7 --Info trick
Published: 2023-08-10 16:10:14

For Phoenix 1.7 you can pass an option `--info` for a path and the `mix` command will return to you the controller, action and file name with line for that router.


```sh
mix phx.routes --info http://localhost:4000/status
```

results
```
$ mix phx.routes --info http://localhost:4000/status
Module: ExampleWeb.StatusController
Function: :status
/Users/lab/example/lib/example_web/controllers/status_controller.ex:7
```

More info https://hexdocs.pm/phoenix/1.7.7/Mix.Tasks.Phx.Routes.html

Commit for this change on Phoenix repository
https://github.com/phoenixframework/phoenix/commits/v1.7.7/lib/mix/tasks/phx.routes.ex
75 berufliches Vorwärtskommen: Reiseplanung der IT-Fachkräfteschaft.
Tags: deutsch, career, motivation, discuss
Published: 2023-08-10 16:00:00

Moin Moin,

wie kommen wir zu einer gemeinsamen Reiseplanung?
Was die Organisation dessen angeht, mache ich mir wenig sorgen. Wir kennen bereits Organisationen von IT-Fachkräften, die sich für eine wichtige Angelegenheit einsetzen – die FSF beispielsweise.

Was wären wichtige Anliegen, die wir klären sollten?
Zum einen gibt es die Frage nach [den beiden Lagern→](https://dev.to/amustafa16421/64-berufliches-vorwartskommen-zwei-lager-19nk). Können Vertreter beider Art innerhalb einer Organisation existieren? Angenommen wir würden jetzt eine solche Organisation im deutschsprachigen europäischen Raum gründen, sollten wir uns klar für Lager aussprechen?
Wie steht es um die Ausbildung von IT-Fachkräften  ( falls dies noch als notwendig empfunden werden sollte )?
Quanten-Computer? Sog. KI? IT-Nutzung im Alltag? Bei Kindern (1)?

Ich selbst meine nicht, dass es ausschließlich, um den deutschsprachigen europäischen Raum gehen müsse, sondern eher, wie die FSF dies regelt, um den menschlichen Anwender. 

1) Was sind deine Gedanken und Antworten zu dem Hiergenannten und Hiergefragten?


Lass uns mittels Kommentaren austauschen.

Beste Grüße,
Mustafa

Oder auch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch

(1) [„Silicon Valley Parents are raising their kids tech free“ – The Tech Advocate↗](https://www.thetechedvocate.org/silicon-valley-parents-raising-kids-tech-free/).
how to convert video to gif image using python and moviepy
Tags: python, programming, coding, moviepy
Published: 2023-08-10 15:57:00

Welcome to a new post 🙂
in this post i will show you  how to convert video to gif image using python and  moviepy

the first step is installing moviepy if not installed

`pip install moviepy`

the second step is write this code 


```python

import moviepy.editor as mp

video = mp.VideoFileClip('test.mp4')
video = video.subclip(0, 5)
video.write_gif('out.gif')

```
**Note**
I cut the first 5 seconds of the video
in line 3
This is not a requirement for video conversion. You can convert video without cutting
The Age of AI: Three disruptive SaaS Ideas for your AI business
Published: 2023-08-10 15:43:49

As the development of AIs becomes more and more prominent, it is necessary to update and think of new ways to generate revenue using this new technology.

Here are some disruptive ideas:

1. Psychotherapy: A portal where people can consult and get help for psychological treatment, taking advantage of generative AI resources and teaching it to serve people. Don't forget to keep the user in control of their information, an RSA + AES encryption would come in handy here.

2. Legal advice: There are several areas of law that can be explored in order to provide legal advice, clients can even use an APP on their smartphones that uses information such as location and voice recording to provide insight into their actions and understand what to avoid in order not to fall into a trap for example. Web3 concepts will also apply here, as nobody wants their data exposed.

3. Medical Report: Once you went to a clinic and did several tests, from a simple glucose index to an Electrocardiogram (ECG), you must present them to a doctor so that he can carry out the report and in case of a disease recommends a treatment or medicine, logically it is not possible to issue a medical report without a doctor "yet".

How about adding to the tool the possibility of doctors being able to validate the report generated by the AI?

Are we talking about the Uber of doctors?

Perhaps...
Live Audio Transcription with Python For Free
Tags: python, machinelearning, programming, challenge
Published: 2023-08-10 15:07:57

Unlike cloud speech-to-text APIs, [Cheetah Streaming Speech-to-Text](https://picovoice.ai/platform/cheetah/) processes speech data locally on-device. Thus, it has a default advantage over the cloud speech-to-text APIs when it comes to speed. No cloud speech-to-text API can eliminate the network [latency](https://picovoice.ai/blog/latency-in-speech-recognition/). They can be fast, but to a certain degree. 

Let's learn to convert live audio to text using Picovoice [Cheetah Streaming Speech-to-Text Python SDK](https://picovoice.ai/docs/quick-start/cheetah-python/), so you can see it yourself. 

---

**1. Install [Cheetah Streaming Speech-to-Text Python SDK](https://picovoice.ai/docs/quick-start/cheetah-python/)**

```
pip install pvcheetah
```

**2. Grab your `AccessKey` from **[Picovoice Console](https://console.picovoice.ai/)****
If you do not have an existing Picovoice Console Account, create one in minutes. No credit card is required. You can enjoy the Forever-Free Plan, as the name suggests, forever!


**3. Import [Cheetah Streaming Speech-to-Text](https://picovoice.ai/platform/cheetah/) package:**

```
import pvcheetah
```

**4. Create an instance of the speech-to-text object with your `AccessKey`:**
```
handle = pvcheetah.create(access_key)
```
Don't forget to replace the placeholder with your `AccessKey`

**5. Implement audio recording.** 
[Cheetah Streaming Speech-to-Text](https://picovoice.ai/platform/cheetah/) processes audio whether it comes from a microphone or another program. 

For the following, we assume there is a function available to us that provides the next available audio chunk (frame) as below.

```
def get_next_audio_frame():
    pass
```
Convert live audio to text:

```
while True:
    partial_transcript, is_endpoint = handle.process(get_next_audio_frame())
    if is_endpoint:
        final_transcript = handle.flush()
```

That's it! In 5 simple steps, you can get live audio converted into text!

---

For more information, you can check

- [the original article](https://picovoice.ai/blog/real-time-transcription-in-python/),
- [how to evaluate live audio transcription engines](https://picovoice.ai/blog/real-time-transcription-live-streaming/)
- [on-prem deployment options](https://picovoice.ai/blog/on-prem-speech-to-text/)
- [the comparison of popular speech-to-text engines](https://picovoice.ai/blog/top-transcription-engines/)
- [advantages of local speech-to-text](https://picovoice.ai/blog/local-speech-to-text-with-cloud-level-accuracy/)
Linux - INODE
Published: 2023-08-10 15:06:19

Remember how our filesystem is comprised of all our actual files and a database that manages these files? 

The database is known as the **inode table**.

## **What is an inode?**  

**An inode (index node) is an entry in this table and there is one for every file.**

It describes everything about the file, such as:

```
File type - regular file, directory, character device, etc  
Owner  
Group  
Access permissions  
Timestamps - mtime (time of last file modification), ctime (time of last attribute change), atime (time of last access)  
Number of hardlinks to the file  
Size of the file  
Number of blocks allocated to the file  
Pointers to the data blocks of the file - most important!
```
**Inodes store everything about the file, except the filename and the file itself!**

## **How do inodes locate files?**

We know our data is out there on the disk somewhere, unfortunately, it probably wasn't stored sequentially, so we have to use inodes.

Inodes point to the actual data blocks of your files.

In a typical filesystem (not all work the same), each inode contains 15 pointers, and the first 12 pointers point directly to the data blocks. The 13th pointer points to a block containing pointers to more blocks, the 14th pointer points to another nested block of pointers, and the 15th pointer points yet again to another block of pointers!

Confusing, I know!

The reason this is done this way is to keep the inode structure the same for every inode but be able to reference files of different sizes. If you had a small file, you could find it quicker with the first 12 direct pointers, larger files can be found with the nests of pointers.

Either way, the structure of the inode is the same

If the article helps you, leave a like, follow, or anything 🙂.  
You can follow me on [LinkedIn](https://www.linkedin.com/in/abhishekpathak32/) and [GitHub](https://github.com/scorcism).