teleren/devto huggingface dataset:
Sloan's Inbox: Considering a role as a Dev Advocate, but worried about less coding & more marketing...
Tags: discuss, devrel, career
Published: 2023-09-07 04:00:00

Howdy y'all! Sloan, DEV Moderator and resident mascot, back with another question submitted by a DEV community member. 🦥

For those unfamiliar with the series, this is another installment of Sloan's Inbox. You all send in your questions, I ask them on your behalf anonymously, and the community chimes in to offer advice. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, that'd be great; just scroll down to the bottom of the post for details on how.

So, let's get down to business...

### Today's question is:

> I'm considering looking for a role in DevRel as a Dev Advocate, but I'm a bit worried about the change toward more marketing and less coding. I'm curious if this is just my perception of the job or if it's reality. I think I can handle some marketing and a little less coding, but I'm worried that the change may be too drastic of an adjustment. Note: one of the reasons I'm looking for a position like this is because I really do love interacting with and teaching other people; I'm hopeful that I'll be able to do a bit more of both in this type of role.
>

Share your thoughts and lets help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*
You Think Fancy Fonts Evoke Specific
Tags: instagrambiostyle, instafonts, instagramfont, instagrambiofont
Published: 2023-09-07 02:59:14

Fancy fonts, with their unique shapes and styles, undoubtedly can evoke specific emotions in design. In modern visual communication, especially on platforms like Instagram, where “Instagram font style” plays a pivotal role, the font choice goes beyond mere aesthetics. It significantly influences how messages are perceived and felt.

Fonts, whether simple or ornate, carry inherent connotations. The curves, angles, and embellishments in fancy fonts often echo certain emotions or moods. For instance, delicate cursive fonts can evoke elegance and sophistication, making them suitable for wedding invitations or luxury brand logos. On the other hand, bold and angular fonts convey strength and assertiveness, often used for impactful headlines or motivational quotes.

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

The psychology of fonts is intertwined with cultural and contextual cues. A vintage-inspired fancy font might evoke nostalgia, transporting viewers to a different era. Meanwhile, a playful and whimsical font style might induce a sense of joy and lightheartedness, making it ideal for children's content or festive occasions.

In the realm of Instagram, where "**[Instagram font style](https://fansyfont.com/fonts/instagram-fonts.php)**" is integral to establishing a visual identity, the font choice can define a brand's personality. A fitness influencer might opt for clean, modern fonts to convey professionalism and health-consciousness. Conversely, an artist might use a hand-drawn font to foster authenticity and creativity.

It's important to note that the emotional impact of fonts is subjective and context-dependent. A font that exudes elegance in one context might feel out of place in another. Designers and content creators must carefully consider the intended emotional response and align it with the message they aim to convey.

**[Website](https://pastenow.net/page/you-think-fancy-fonts-evoke)**
Pilot - Start of my blog journey 🛫
Tags: computerscience, programming, pilot, career
Published: 2023-09-07 01:31:26

## **Welcome to my first post!** 

I'm glad you're here to witness history.
To those of you who do not know me, my name is David Cho, and I am a Computer Systems Technology at the [British Columbia Institute of Technology](https://www.bcit.ca/) (BCIT). Before enrolling at BCIT, I graduated from the University of Waterloo with a degree in Honours Science - Bioinformatics.

> Why Did I Switch from Science to Tech?

During my time at the University of Waterloo, many of my close friends and roommates were studying computer science. Their influence may have played a role in my eventual decision to pursue a tech career. Another major factor was my love for problem-solving and critical thinking. As a child, I was fascinated by puzzles and riddles and even dreamed of growing up to be like Sherlock Holmes. Fortunately, after taking a few introductory computer science courses at the University of Waterloo, I felt like I had found my calling.

> Why Did I Choose BCIT and the CST Program?

After extensive research, I discovered that BCIT and its CST program are popular among new graduates and career switchers. The 2-year CST program emphasizes hands-on learning and focuses more on practical skills than theory, making it ideal for those looking to advance their education.

> Did I Make the Right Choice?

As the saying goes, "Life is like a box of chocolates; you never know what you're going to get." I've completed my first term in the CST program and have just started my second term. So far, everything is going well, but life is full of surprises—who knows, I might even become a trout farmer one day.
Short note: Isomorphic overkill for shared json serialization?
Tags: isomorphic, webdev, typescript, discuss
Published: 2023-09-07 01:28:52

It feels like typescript and nextjs are rising in popularity because of isomorphic programming. In reality, there are very few moments where I want to use the same library functions on the client and server. Ultimately, I just want to share a set of definitions for structs and have the front end and backend have generated serialization logic for those structs.

This can be achieved by either defining the structs in a special language like avro or graphql, or by defining them in the backend language and generating front end code. Defining them in the backend language seems simpler because then you only need code generation for the front end. So, maybe the path forward is to ensure each orm in golang, python, typescript, and rust can generate front end struct declarations in elm/typescript, and that elm/typescript can generate json serialization from the structure definitions.
Next.js 13 WhatsApp Web Clone with Web Push Notifications
Tags: whatsapp, nextjs
Published: 2023-09-09 11:22:51

---
title: Next.js 13 WhatsApp Web Clone with Web Push Notifications
published: true
date: 2023-09-07 00:42:00 UTC
tags: Whatsapp,Nextjs
canonical_url: https://reactjsexample.com/next-js-13-whatsapp-web-clone-with-web-push-notifications/
---

# Next.js 13 WhatsApp Web Clone with Web Push Notifications
 ![Next.js 13 WhatsApp Web Clone with Web Push Notifications](https://reactjsexample.com/content/images/2023/09/Code_2023-09_13-36-43.jpg)

This project uses [Stream’s chat SDK](https://getstream.io/try-for-free/?utm_source=codinginflow&utm_medium=sponsorship&utm_content=&utm_campaign=Codinginflow_2023Aug_CTA_klmh22) to provide a fully functional live chat with attachments, reactions, threads, and more. It also uses the **web push** API to send push notifications about new chat messages even if the browser window is closed.

Other technologies used:

- Next.js 13 app router
- Clerk for authentication
- TailwindCSS
- TypeScript

Watch the **tutorial on YouTube** to learn how to build this from scratch: [https://www.youtube.com/watch?v=9afMU7GOcAg](https://www.youtube.com/watch?v=9afMU7GOcAg)

![Next.js 13 WhatsApp Web Clone with Web Push Notifications](https://user-images.githubusercontent.com/52977034/264964030-38d13d1f-bc83-411d-ba0f-070c1866da11.png)

## GitHub

[View Github](https://github.com/codinginflow/nextjs-stream-chat?ref=reactjsexample.com)
Padel Club Website built with Next.js
Tags: nextjs
Published: 2023-09-09 11:22:47

---
title: Padel Club Website built with Next.js
published: true
date: 2023-09-07 00:40:00 UTC
tags: Nextjs
canonical_url: https://reactjsexample.com/padel-club-website-built-with-next-js/
---

# Padel Club
 ![Padel Club Website built with Next.js](https://reactjsexample.com/content/images/2023/09/Code_2023-09_13-33-39.jpg)

Padel Club is Copenhagen based community for padel players. Join us for our next game, and have fun!

[![Padel Club Website built with Next.js](https://user-images.githubusercontent.com/33018844/264933790-26b4c3fe-e311-400d-b1a6-bf367d6812e7.png)](https://user-images.githubusercontent.com/33018844/264933790-26b4c3fe-e311-400d-b1a6-bf367d6812e7.png)

## Stack

### PostgreSQL

The backend is powered by [PostgreSQL](https://www.postgresql.org) which is used to store the sessions and users related information. It is an open source relational database solution; my go-to choice for new projects.

### NextJS

A very powerfult React framework. The frontend and the API handling the database connection and queries is implemented in Typescript using this framework.

### Docker

The project is containerized using Docker. You can build and run the project using the following commands:

- `sudo docker build -t padel-club .`
- `sudo docker run -p 3002:3002 padel-club`

## TODO

- Ability to leave the club (remove from members)
- Admin page for adding new sessions
- Store game results for more serious sessions
- Filter expired sessions -> show only for people that need to pay or max 2-3 expired sessions
- Personal page to see activity (sessions)
- Ability to invite people to the club/session

## Screenshots

[![Padel Club Website built with Next.js](https://user-images.githubusercontent.com/33018844/264933785-1c338336-1cab-45f9-b848-f4f802b9564b.png)](https://user-images.githubusercontent.com/33018844/264933785-1c338336-1cab-45f9-b848-f4f802b9564b.png)

[![Padel Club Website built with Next.js](https://user-images.githubusercontent.com/33018844/264933798-b9cb4fa8-b197-4bab-aec5-e17a06a3160e.png)](https://user-images.githubusercontent.com/33018844/264933798-b9cb4fa8-b197-4bab-aec5-e17a06a3160e.png)

[![Padel Club Website built with Next.js](https://user-images.githubusercontent.com/33018844/264933811-534d27b3-c47c-47be-80a5-8c136e94d7a4.png)](https://user-images.githubusercontent.com/33018844/264933811-534d27b3-c47c-47be-80a5-8c136e94d7a4.png)

[![Padel Club Website built with Next.js](https://user-images.githubusercontent.com/33018844/265136760-ac1af016-3ffd-4724-a731-ceec1410629d.png)](https://user-images.githubusercontent.com/33018844/265136760-ac1af016-3ffd-4724-a731-ceec1410629d.png)

## GitHub

[View Github](https://github.com/Kajatin/padel-club?ref=reactjsexample.com)
Why should one pick Svelte over React ?
Published: 2023-09-06 22:31:10

One should chose Svelte over React when you care deeply about performance and bundle sizes. Svelte focuses a lot on these sort of optimizations compared to any other framework in the market. 

## When does performance matter ?

Performance matters when you are building applications which are going to be extremely complex with lots of components. It matters for SEO and it matters if your users are expected to use outdated cheaper hardware. 

Svelte would be a good choice in this case. For example building applications for Schools where bandwidth might be slow and device might be old. 

## When does React or Angular not work ? 

Imagine you are building an enterprise product which will have like 30 different widgets on one page. Such pages get bloated very soon and React, Angular etc. need special attention to optimizations. But [Svelte does these optimizations by default](https://www.frontendeng.dev/blog/11-svelte-and-react). 

## Conclusion

[Svelte is a performance focused front end framework](https://www.frontendeng.dev/blog/11-svelte-and-react).
A simple TODO list application built with Typescript and ReactJS
Tags: todo, typescript
Published: 2023-09-09 11:22:31

---
title: A simple TODO list application built with Typescript and ReactJS
published: true
date: 2023-09-07 00:04:00 UTC
tags: Todo,TypeScript
canonical_url: https://reactjsexample.com/a-simple-todo-list-application-built-with-typescript-and-reactjs/
---

 ![A simple TODO list application built with Typescript and ReactJS](https://reactjsexample.com/content/images/2023/09/Code_2023-09_12-59-21.jpg)

This is a simple TODO list application built with HTML, CSS, and Typscript in React that allows you to manage your tasks. The unique feature of this application is that it uses Local Storage to store your tasks locally in your browser, so you can access and manage them even after closing and reopening the application.

[View Demo](https://my-todo-mr-ayush25.vercel.app/)[View Github](https://github.com/Mr-Ayush25/My-Todo?ref=reactjsexample.com)

## Installation

1.Clone or download this repository to your local machine. 2.Navigate to the project folder. 3.Open index.html in your preferred web browser.

## Usage

1.Adding a Task

2.To add a task, simply type your task in the input field and press the “Add” button or hit Enter. The task will be added to the list below. Editing a Task

3.Click on the checkbox next to a task to mark it as complete. Click again to mark it as incomplete. Deleting a Task

4.To delete a task, click the “Delete” button next to the task you want to remove.

## Local Storage

All your tasks are saved to Local Storage, so they will persist even after you close the browser or refresh the page.

## GitHub

[View Github](https://github.com/Mr-Ayush25/My-Todo?ref=reactjsexample.com)
A tier list maker written in React
Tags: list
Published: 2023-09-09 11:22:19

---
title: A tier list maker written in React
published: true
date: 2023-09-07 00:02:00 UTC
tags: List
canonical_url: https://reactjsexample.com/a-tier-list-maker-written-in-react/
---

# Tiers of Joy
 ![A tier list maker written in React](https://reactjsexample.com/content/images/2023/09/Code_2023-09_12-57-02.jpg)

A tier list maker written in React.

## Figma Design:

![A tier list maker written in React](https://github.com/sameer1612/tiers-of-joy/raw/main/public/figma.png)

## How to use?

1. Enter a bunch of image URLs using Edit items button.
2. Create some categories/tiers using Edit tiers button.
3. Drag and drop image tiles from sidebar to appropriate tier row.
4. Use clear to remove all tiers and items.
5. Use reset to move all items to left sidebar.

## Demo

[Video coming soon…]

## GitHub

[View Github](https://github.com/sameer1612/tiers-of-joy?ref=reactjsexample.com)
AZURE IOT HUB
Tags: azure, iot, raspberrypi
Published: 2023-09-06 19:38:03

## **Implement Azure IOT HUB**

_Project_

Creating An Azure IOT Hub in Azure Portal and Configuring the hub to authenticate a connection to an IOT DEVICE using the Raspberry Pi device Simulator...

STEPS
From the home screen. The arrow in red input iot hub in the search box.
Then click create
Then under Basics choose any Resource Group
Then use any iot hub name for reference i used BOBOIOTHUB.
Go with default region 
Then Review + create
When the deployment is complete 
click on GO to Resource.


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


Then on the Left hand side under device management click devices.
Then add device
Then i used BOBODEVICE as name and saved.

Then click on the device added; copy primary connection string.
(FOR RASPBERRY PI DEVICE GOOGLE THE ONLINE SIMULATOR) for testing purposes




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


Paste the string in line 15  



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

Click on run
Then you would notice the indicator would be blinking red on and off

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




THEN GO TO THE IOTHUB HOMEPAGE then click overview to see the IOT hub usage 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65198xi791g01oj884xl.png)
Ripristino backup con SQL Server
Tags: database, sql
Published: 2023-10-03 14:21:58

---
title: Ripristino backup con SQL Server
published: true
date: 2023-09-07 00:00:00 UTC
tags:
- "database"
- "sql"
canonical_url: 
---

# Cosa vedrai

- [Definizione di ripristino](#definizione-di-ripristino)
- [Come funziona](#come-funziona)
- [Risorse utili](#risorse-utili)

# Definizione di ripristino

Il **recupero** e il **ripristino** di un’istanza SQL Server supporta l’utilizzo di dati da backup di un intero database, di un file di dati o di una pagina di dati.

In questo post, vediamo come ripristinare un **intero database**.

# Come funziona

Cliccando con il destro sulla voce _“Database”_, vedremo l’opzione “_Ripristina database_”:

![](https://theredcode.it/img/mssql-recover-menu.png)

_Opzione per ripristinare un database_

Questa andrà ad aprire una finestra che ci permetterà di definire le **opzioni di ripristino.**

![](https://theredcode.it/img/mssql-recover-blank.png)

_Finestra per ripristinare un database_

Prima di tutto, nella sezione _“Origine”_ possiamo scegliere **quale database ripristinare** : nell’elenco presente nel menù a tendina verranno mostrati tutti i database i cui backup si trovano sotto la cartella di default:

![](https://theredcode.it/img/mssql-recover-default-db.png)

_Database presenti nella cartella predefinita dei backup_

![Cartella predefinita per il salvataggio dei backup](https://theredcode.it/img/mssql-backup-folder.png)

_Cartella predefinita per il salvataggio dei backup_

Selezionando la voce _“Dispositivo”_, possiamo invece scegliere di andare a recuperare la nostra copia altrove: su un disco differente, su un server dove abbiamo accesso tramite FTP…

Nella sezione _“Destinazione”_, scegliamo **dove** andare a eseguire il ripristino del database: in questo caso, se lasciamo che esegua il ripristino sul database _creato in precedenza_, quest’ultimo verrà totalmente _sovrascritto_.

![](https://theredcode.it/img/mssql-recover-destination.png)

_Destinazione per il ripristino del database_

L’opzione _“Ripristina fino a”_ ci permette di selezionare l’ **intervallo di tempo** che fa da riferimento per il backup da ripristinare:

![](https://theredcode.it/img/mssql-recover-range.png)

_Scelta dell’intervallo di tempo del ripristino del database_

Nel caso della figura precedente, il backup è stato eseguito _accodando_ più copie sullo stesso file ad intervalli orari diversi: possiamo quindi scegliere quale vogliamo andare a ripristinare seguendo la linea temporale in figura.

> Per rivedere il concetto di **backup** e **accodamento** , leggi l’articolo!

Se invece il ripristino deve avvenire su un **nuovo database** , è sufficiente cambiare il nome del database di destinazione:

![](https://theredcode.it/img/mssql-recover-new.png)

_Nuova destinazione per il ripristino del database_

> … and that’s done!

# Risorse utili

- [Documentazione ufficiale](https://docs.microsoft.com/it-it/sql/relational-databases/backup-restore/restore-and-recovery-overview-sql-server?view=sql-server-ver16)
- [Basi di Dati](https://amzn.to/3ABUix3)
Establish A Session With The Bitwarden CLI
Published: 2023-09-07 23:03:40

---
title: Establish A Session With The Bitwarden CLI
published: true
date: 2023-09-07 00:00:00 UTC
canonical_url: https://blog.waysoftware.dev/blog/bitwarden-session/
---

Create a Bitwarden session in the terminal with one command:

```
export BW_SESSION=$(bw unlock --raw)

```
Demystifying JavaScript's Behavior with Primitives and Objects
Tags: javascript, frontend, webdev, programming
Published: 2023-09-06 23:40:23

Have you ever wondered why JavaScript sometimes treats primitive values like objects? Let's dive into this intriguing behavior and uncover how JavaScript seamlessly combines primitives and objects.

## Part 1: The Mystery of Strings

In this simple example, I declared a variable name and assigned it the value "samia" However, when I accessed name.length, it returned 5, as if name was an object, not a primitive string.



```javascript
let name = "samia";
console.log(name.length); // Output: 5
```

## Part 2: Using methods with primitives
Let's take another example, and explains what happens under the hood.

```javascript
let name = "samia"
console.log(name.toUpperCase()) // SAMIA
```
Again we can access the method `toUpperCase()` just like we usually do with objects, What's happening here, why does it look like javascript is treating name variable as an object?

## Part 3: Unwrapping the Mystery
Whenever it seems like we're treating primitives as objects, these steps happen:

1- Auto-Boxing: The process where JavaScript temporarily treats primitives as objects to access methods is known as "auto-boxing" or "boxing".
When you access a property or method on a primitive, JavaScript automatically converts (boxes) the primitive into its object wrapper (e.g., **String**, **Number**, **Boolean**) behind the scenes. This is done on-the-fly without creating explicit object instances.

2- Method Execution: After the primitive is temporarily boxed, the method (e.g., `toUpperCase()`) is executed on the boxed value. The method runs, and any necessary transformations are applied to the primitive value.

3- Unboxing: Once the method execution is complete, JavaScript "unboxes" the value, returning it to its original primitive state. There's no lasting object created; it's just a momentary conversion for method access.

## Conclusion
JavaScript's ability to seamlessly blend primitives and objects is all part of its elegant design, aimed at making your coding life easier. It's like having the best of both worlds—efficient primitives when you need them and handy object wrappers when you don't.

So, the next time you encounter JavaScript treating a primitive like an object, you'll know it's all part of the magic behind the scenes.

Resource
https://javascript.info/primitives-methods
Serving Jupyter Notebook with Docker
Tags: docker, jupyter, devops, selfhosted
Published: 2023-09-06 23:04:26

👋 Hi!

In this article, I'll walk you through the steps I took to revamp my aging Python applications and migrate them to a Docker container on a production server.

## The Legacy Setup

Several years ago, I had a collection of Python applications that I shared with my coworkers using an old Windows server. This server hosted Jupyter Notebook with remote access enabled.

Today, to my surprise, I realised that some of these scripts were still being actively used by a group of users.

I decided to **migrate the jupyter notebook server to a Docker container**.

## Creating the Dockerfile

We need a `Dockerfile`, which is essentially a recipe for building a Docker image. This file included all the necessary instructions to set up a Python environment, install the required libraries, and configure Jupyter Notebook.

```Dockerfile
# Use an official Python 3.11 image
FROM python:bookworm

# Need voila to serve the scripts as applications
RUN pip install voila
RUN pip install notebook

# Create the isolated dir on docker
RUN mkdir /jupyterbooks
WORKDIR /jupyterbooks

EXPOSE 8888

# Run jupyter with remote access enabled
CMD sh -c "jupyter notebook --no-browser --allow-root --IdentityProvider.token='yourSecretToken' --ServerApp.allow_origin='*' --ServerApp.port=8888 --ServerApp.allow_remote_access=True --ServerApp.ip='0.0.0.0'"
```

Also created a `docker-compose.yml` file to configure the container

```yaml
version: "3.3"

services:
  jupyter-service:
    container_name: jupyter-service
    build:
      context: .
      dockerfile: Dockerfile
    image: jupyter-service
    restart: always
    ports:
      - 8888:8888
    volumes:
      - jupyter-data:/jupyterbooks

volumes:
  jupyter-data:
    name: jupyter-data
```

Copied the old scripts at the new docker jupyter-data volume with `docker cp myNotebooks jupyter-service:/jupyterbooks/`

And finally `docker compose up -d` does the trick.

## Conclusion

I'ts amazing how two short files can configure such a service.

Now I can access the notebook with my token and the users can consume the applications without password through voila.

Cheers!