teleren/devto huggingface dataset:
Why You Should Be Managing Your Strengths w/ Tiffany Jachja
Tags: career, motivation
Published: 2023-09-14 20:59:39

We’ve all heard “comparison is the thief of joy,” but isn’t that just because we’re comparing our weaknesses to someone else’s strengths? Imagine a world where our focus was ‘strengths first’. Yeah, I know, a simple thought but a difficult practice. Luckily today we’re talking about managing our strengths with Engineering Manager Tiffany Jachja.

**To get that full motivational boost you know you need, click here:**

[YouTube Link](https://www.youtube.com/watch?v=rIA9kexiESk)

**For Motivational Boost Lite:**

Y’all ever get years into a career only to realize you’re just following someone else’s path and you’re not happy with what you’re doing and every day is an emotional drain and you don’t know how you got there? I’m going to go out on a limb here and say that’s actually a lot of us. We’re given a ladder and told we’re supposed to climb with no regard to our future or our happiness in the long run. Chasing money and titles aside (respect, go get that bag girl), the fastest way to bring happiness to your career is to do something you’re good at. It’s another one of those things that seems obvious but is deceptively difficult.

For starters, figure out your unique skills and talents. What do your coworkers always ask for your help on or what do you always seem to fly through when it should be taking you much longer? Most of our strengths follow us from childhood. I, personally, see one of my biggest strengths as my ability to be emotional. Despite being told this was a weakness for most of my life, I’ve recently decided to just lean into it. I’m able to bring empathy and understanding to situations, and I’m now seeing as an advantage in my career. I’ve shifted my focus, allowing myself to be happy and do things that play off my emotional strengths.

Not to be that guy rolling out of a smoky van saying, “Your weaknesses are actually your strengths mannn.” But being able to identify your weaknesses does help you. If you can identify exactly what isn’t working for you, just surround yourself with people who are good at the things you’re bad at. Great at seeing flaws in a project but not so great at constructively presenting those things? Find or build a team where you can work with someone to share your ideas in a way that doesn’t make it seem like you’re always being “that negative guy.”

So break out of your career autopilot, look around, and see if you’re actually happy and effectively leveraging your skills, not just doing what you went to school to do. There’s not a fun or exciting way to put this, but you have to figure out how much your job satisfaction and happiness are worth and take that number with you into the job market. There’s only so much money you can make and there’s only so many titles you can hold, but do you actually know what you want out of your career?

See just a super light conversation about managing your skills. No extensional crisis to see here.
Episode 23/36: Q&A Session Angular Team, Sololearn Course, Astro 3 & Bun 1
Tags: angular, webdev, javascript, programming
Published: 2023-09-14 20:36:23

Jeremy Elbourn shared the long-term vision for RxJs and Angular. Sololearn published a free Angular course. Bun, an alternative to Node.js, was released in version 1.

{% embed https://youtu.be/n5DvdrYlgL8 %}

## Angular Q&A

We had our monthly Q&A stream with Mark Thompson and Jeremy Elbourn from the Angular team. It was pretty special this time because we got a look behind the scenes. Jeremy was working and commenting on one of his current tasks where the compiler was part of it.

Obviously, it was just scratching the surface. Either way, you could get an impression of a typical development task of an Angular core member.

Questions have been answered as well. My highlight was, and here I quote Jeremy: 
…

> ...this is something that is going to take years, of course. But long-term, we do want to move to a point where we're making RxJs optional for Angular...

That is something which hasn't been communicated in that clearness until now.

Watch the session here: 

{% embed https://www.youtube.com/live/yN1xIs0IucQ?si=Ot5mVqbKhnV26IZY %}

## Free Angular Course on Sololearn

In the realm of educational resources, the Angular team has introduced a free Angular course on Sololearn, a unique learning platform.

Sololearn takes an unconventional approach to programming education, making it worth exploring.

Discover the course here

{% embed https://blog.angular.io/new-free-interactive-angular-course-for-beginners-on-sololearn-7a4c4f91810a %}

## Nx 16.8
	
Additionally, Nx, an alternative to the Angular CLI, has reached version 16.8. For more in-depth information, you can watch their release video.

Learn more about Nx 16.8

{% embed https://www.youtube.com/watch?v=wj-gb6jqyzA %}

## Astro 3.0

In the wider JavaScript ecosystem, we witnessed the release of Astro version 3, representing a new generation of frontend frameworks. While Angular can be integrated into Astro, it requires using Analog.js.

Astro has popularised the "island architecture," a unique hydration technique similar to Angular's upcoming deferred loading feature. Deferred loading refers to the hydration phase, which doesn't initiate automatically but via a trigger, such as when a specific element enters the viewport.

Read about Astro 3 here

{% embed https://astro.build/blog/astro-3/ %}

## Bun 1.0

Furthermore, we celebrated the first stable release of Bun, an intriguing alternative to Node.js. Bun employs JavaScriptCore as its engine, unlike Node.js, which relies on V8. JavaScriptCore powers Safari, while V8 is used in Chrome. Notably, Bun outperforms Node.js, particularly in startup times.

Angular isn't yet compatible with Bun, but an open issue on GitHub discusses this potential integration.

Explore Bun's stable release and Angular compatibility here: 

[Angular Issue regarding Bun](https://github.com/oven-sh/bun/issues/2336)

{% embed https://bun.sh/blog/bun-v1.0 %}
Automating DevHunt: How We Put Weekly Emails on Autopilot
Tags: producthunt, email, cron
Published: 2023-09-14 20:32:49

Bot-driven upvotes? Not on our watch. [DevHunt](https://devhunt.org) is open-source, crafted by devs, for devs, with a primary goal to operate autonomously. While Vercel and Supabase serve us well, hands-free email automation was a bit of a buzzkill.

**This is what we needed to happen, email wise:**
1. On register, trigger a webhook to send a welcome email.
2. Announce the top three winners with badges immediately after voting ends at midnight on Mondays.
3. After 3 hours, notify everyone about the winners.
4. 9 hours post-voting, inform everyone about the next set of tools to vote for.
5. Every Friday, remind those who didn’t open the email to cast their vote.
6. Automate the cycle weekly.

**And this is what we ended up doing**
We liked the look of the [Sensorpro](https://sensorpro.eu) Trigger emails. With cronjobs, they can fetch content from our Supabase API, so a totally hands-free operation. Nice.

**This is what the Email Design looks like.** 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5peq5x8860ywe78p6xhl.png)
👆🏿So all we needed to do here was set that url liquid containing whatever content our API puts there, totally set and forget.


**And this is the Trigger code:** 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gne13dssasty9suwhac.png)


Fun fact: DevHunt is on ProductHunt today. We know, right? 🙄 The absolute irony! Still, give us a [fair vote](https://www.producthunt.com/posts/devhunt-2) 🥇
Network Topology Design Characteristics: A Deep Dive
Tags: ccna, cisco, course, network
Published: 2023-09-14 20:00:00

**Introduction:**  
Understanding the intricacies of network topologies is crucial for anyone involved in the world of networking. While network topologies describe how a network is, network design topologies prescribe how it should be. This post will delve into the differences between network types and network topology design.

---

**Network Topology vs. Network Design Topology:**  
1. **Descriptive vs. Prescriptive:** Network topologies describe the current state of a network, while network design topologies prescribe best practices and how a network should ideally function.
2. **Flexibility and Scalability:** Network design topologies emphasize the ability to scale up (enhance performance) or scale out (add more devices) based on the organization's needs.

---

**Key Network Design Topologies:**  
1. **Three-Tier Design:** 
   - Comprises core, distribution, and access layers.
   - Allows for scalability in both performance and device capacity.
   - Suitable for large networks or those preparing for future expansion.

2. **Two-Tier Design:** 
   - Collapses the core and distribution layers into single devices or layer three switches.
   - More common in small to medium businesses.

3. **Spine-Leaf Topology:** 
   - Features spine switches connected to leaf switches.
   - Leaf switches act as access layer switches for endpoints.
   - Every leaf switch connects directly to every spine, ensuring redundancy and failover capabilities.
   - To increase endpoint capacity, add more leaf switches.
   - To enhance bandwidth, add more spine switches.

---

**Conclusion:**  
Network design topologies are foundational for ensuring that a network can adapt to changing needs, whether that's adding more devices or enhancing performance. By understanding the differences and applications of each design topology, one can optimize network performance, ensure smooth data flow, and prepare for future growth.
React Help
Tags: webdev, react, programming, beginners
Published: 2023-09-14 19:50:58

Here's a link [codesandbox project I'm working on](https://codesandbox.io/s/tip-calculator-ff3dyv?file=/src/App.js:1168-1249). Can anyone tell me why the button at the bottom of form component stops resetting the Rate component once I put it inside the ternerary operator, please?
Leetcode #1299 - Replace Elements with Greatest Element on Right Side
Published: 2023-09-14 19:43:11

Hello Dev Community,
I'm posting my solution to the Leetcode problem [#1299 - Replace Elements with Greatest Element on Right Side](https://leetcode.com/problems/replace-elements-with-greatest-element-on-right-side/) `Easy`

Problem description:

Given an array `arr`, replace every element in that array with the greatest element among the elements to its right, and replace the last element with `-1`.
After doing so, return the array.

```
var replaceElements = function (arr) {
    let res = new Array(arr.length);
    let max = 0;
    res[arr.length - 1] = -1;

    for (let i = arr.length - 1; i > 0; i--) {
        max = Math.max(arr[i], max);
        res[i - 1] = max;
    }

    return res;
};

console.log(replaceElements([17, 18, 5, 4, 6, 1])); 
// [ 18, 6, 6, 6, 1, -1 ]
```

Method - Two pointers (i and i-1)
Complexity - Time O(n) | Space O(n)

Leetcode stats:
Runtime - beats 78.21%
Memory - beats 60.18%

I welcome your comments or suggestions!
Create a file uploader API using FastAPI and Python
Tags: python, programming, fastapi, api
Published: 2023-09-14 19:30:59

## Hi 🙂🖐

Welcome in a new post, today i will share with you how to Create a file uploader API using FastAPI and Python.


## Step 1

Import modules 
```python
from fastapi import FastAPI
from fastapi import File, UploadFile
from fastapi.responses import FileResponse
from secrets import token_hex

import shutil
import os
```

## Step 2
Create route for uploading files

```python
app = FastAPI()

@app.get('/')
def home():
    return {'msg': 'Welcome In The API'}


@app.post('/upload')
def upload(file : UploadFile = File(...)):
    file_id = token_hex(20)
    full_path = f'files/{file_id}---{file.filename}'
    with open(full_path, 'wb') as buffer:
        shutil.copyfileobj(file.file, buffer)
    
    return {
        'msg': 'Done', 
        'file_link': f'http://127.0.0.1:8000/{full_path}'}
    
```

## Upload file to the API
```python
import requests

files = {'file': open('test.png', 'rb')}

res = requests.post('http://127.0.0.1:8000/upload', files=files)
print(res.json())
```

## result
```
{'msg': 'Done', 'file_link': 'http://127.0.0.1:8000/files/0a89f439b0eca2e4c1a586ee5dd0807beada3fd1---test.png'}
```

Now we need to create route to get this file

```python
@app.get('/files/{file_name}')
def get_file(file_name : str):
    for f_name in os.listdir('files'):
        if f_name == file_name:
            return FileResponse(f'files/{file_name}')
        
    return {'msg': 'File not found :('}
```

## result


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

## full code

```python

from fastapi import FastAPI
from fastapi import File, UploadFile
from fastapi.responses import FileResponse
from secrets import token_hex

import shutil
import os

app = FastAPI()

@app.get('/')
def home():
    return {'msg': 'Welcome In The API'}


@app.post('/upload')
def upload(file : UploadFile = File(...)):
    file_id = token_hex(20)
    full_path = f'files/{file_id}---{file.filename}'
    with open(full_path, 'wb') as buffer:
        shutil.copyfileobj(file.file, buffer)
    
    return {
        'msg': 'Done', 
        'file_link': f'http://127.0.0.1:8000/{full_path}'}
    

@app.get('/files/{file_name}')
def get_file(file_name : str):
    for f_name in os.listdir('files'):
        if f_name == file_name:
            return FileResponse(f'files/{file_name}')
        
    return {'msg': 'File not found :('}
```




**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Web Dev Tools of the Week (No. 2)
Tags: webdev, javascript, tailwindcss, api
Published: 2023-09-14 18:50:46

The latest issue of [my newsletter](https://webtoolsweekly.com/) went out today, but I thought I would round up a few of my favourite picks of the week. Check out [the full issue](https://mailchi.mp/webtoolsweekly/web-tools-530) or subscribe for more but for now let's look at my selections of the week.

## [LangUI](https://www.langui.dev/)

An open-source Tailwind library with free to use responsive components tailored for AI and GPT projects, with dark and light modes built in. Combining Tailwind and GPT seems like a very 2023 thing to do! :)

[![LangUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgsjo7ygxz2n8ic68wov.png)](https://www.langui.dev/)

## [BlendIcons](https://blendicons.com/)
This week's issue includes a few different free icon websites, including this one. It's a searchable/filterable resource of 142,000+ icons in various image and code formats and each available in different styles (bold, line, etc).


[![BlendIcons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azra2w34yhlm65r20i46.png)](https://blendicons.com/)


## [Video Thumbnail API](https://thumbnail.video/)
This is a cool open-source tool that allows you to get a thumbnail image from any public video URL at the specified time. You can access the service via the API using a URL like:

```
thumbnail.video/api/get?url={video_url}&seconds=${seconds}
```

Or directly in the browser, no login required, using the UI on the linked page.

[![Video Thumbnail API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1w2at3sxvwpjpgbtga3.png)](https://thumbnail.video/)



## [Portfolio Template](https://github.com/devsyedmohsin/portfolio-template)
If you're fairly new to web development and are looking for a simple portfolio template to show your work and skills, this might be a good option before you commit to something more custom. Of course, this one is customizable in itself, so you might like it as a long-term solution too.


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qd9xo1zmcgiux4lbxwb.png)](https://github.com/devsyedmohsin/portfolio-template)



## Subscribe for More
That's it for this week's small roundup of tools. You can [subscribe to Web Tools Weekly](https://webtoolsweekly.com/) for more or view the [full issue](https://mailchi.mp/webtoolsweekly/web-tools-530) for the complete list of this week's finds.
Episodio 5: De tarjetas perforadas a ChatGPT Parte 3
Tags: podcast, spanish
Published: 2023-09-14 18:49:09

Ya esta disponible el último episodio del #podcast de la Terminal, en donde viajaremos en el tiempo y nos posicionamos en el año 2000, de la mano del Ing. Luis Guzman nos cuenta como es que se ha expandido la tecnología en México y los diferentes programas gubernamentales que de alguna manera u otra han ayudado a estar en un país cada vez mas conectado. Acompañado con @JorgeAvikla y @FGerCarrillo
Ya lo puedes escuchar directamente en Spotify:

https://open.spotify.com/episode/0fnzf8QxE8Nk0OGxeIf8oC?si=18b7d9da03ce4c8b&fbclid=IwAR1YUfskdYim99lqq6DRtHZeg63Hra0mfK4-3sdNbyqjA3vTiF8Bj_Yivno
DAY 1
Tags: docker, mongodb, rabbitmq, node
Published: 2023-09-14 18:31:40

## 1. Setting Up docker in Ubuntu
- installing docker
`➜ ~ sudo apt-get update`
`➜ ~ sudo apt-get install ./docker-desktop-<version>-<arch>.deb`

- lauch docker desktop
`➜ ~ systemctl --user start docker-desktop`

```

```

## 2. Clone repository and install all dependencies 

- create ssh keys
`➜ ~ ssh-keygen`
- add ssh key in GitHub
- clone repository 
`➜ ~ git clone git@github.com:<username>/repo.git`

- install all dependencies `pnpm i`

```

```
## 3. Setup monogoDB in docker

- pull mongodb `➜ ~ docker pull mongo`

- run mongodb in port 27017 `➜ ~ docker run -d -p 27017:27017 --name mongodb mongo`

```

```
## 4. Setup rabbitmq in docker

- pull rabbitmq `➜ ~ docker pull rabbitmq`

- run rabbitmq in port 5672 `➜ ~ docker run -d -p 5672:5672 --name rabbitmq rabbitmq
`

```

```
## 5. Running server

`pnpm start:server`


```

```

## Other Helpful docker commands

- Stop and Remove Containers
```
docker stop $(docker ps -aqf "ancestor=<conatinername>:latest")
docker rm $(docker ps -aqf "ancestor=<conatinername>:latest")
```

- Stop and remove all running containers

```
docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q)

```

- Delete the Images

```
docker rmi <image name>:latest
docker rmi <image name>:latest
docker rmi <image name>:management

```

- Delete all Docker images

```
docker rmi $(docker images -a -q)

```
MY STRUGGLE WITH USING DJANGO FRAMEWORK AT FIRST AND THE SIMPLEST STEPS TO CREATE A SIMPLE APP IN DJANGO
Tags: django, beginners, coding, python
Published: 2023-09-14 18:13:30

It took me a while (if only I could elongate “a while” to express how long it actually took me🤣) to discover the steps required to create a simple Django app (my first was a blog app), but when I did, life became easier for me.

So, here are the simple steps to create a Django app. Once you’re familiar with these steps, Django becomes as easy as child’s play:

STEP 1: Installing Python and Django

First, you must have Python installed on your computer. You can install Django using pip:

```
pip install django
```

Confirm that you’ve installed Django correctly by running this command:

```
django-admin — version
```

STEP 2: Creating Your Project

Now, you’ll need to create your project by using this command (replace “Arby” with your project name):

```
django-admin startproject Arby
```

In Django, when you create a project, you create your apps inside your project. The amazing thing is that in one Django project, you can have multiple apps, and you’re still good to go!

STEP 3: Creating Your App

It’s time to create your app using this command:

```
python manage.py startapp arbysApp
```

Make sure you change your working directory to your project first before doing this, or it will be a struggle 😞 (I had a bit of a struggle with this when I started learning Django too).

STEP 4: Configuring Your Database

You need to let your database understand that you now have an app present (database configurations). Click on your project and observe there’s a Python file called ‘settings.py’. Scroll to where INSTALLED APPS are and add your app ‘arbyApp’ to it. For this explanation, we’ll stick to SQLite as all necessary connection settings are in place already.
STEP 5: Creating Your Models

Django models are like the blueprints for your web app’s data. They define how information should be stored and organized. Locate your ‘models.py’ file using Django’s object-relational mapping (ORM).

STEP 6: Applying Migrations

Based on the models you created, you’ll need to migrate for your app to recognize the changes made. Use these commands:

```
python manage.py makemigrations
python manage.py migrate
```

Migrations help you manage and understand how your database has changed over time in your web application.

To be continued……

Feel free to reach out to me on my - [Reddit](https://www.reddit.com/user/arbythecoder/)
- [Medium](https://medium.com/@houseofarby)
- [Hashnode](https://hashnode.com/@ArbytheCoder)
- [HackerNoon](https://hackernoon.com/u/arbythecoder)
- [GitHub](https://github.com/Arbythecoder)
- [Twitter](https://twitter.com/arbysbodyorg__)
- [LinkedIn](https://www.linkedin.com/in/abigealafolabi210990/) for further discussions and questions.
HAR Files: A Tester's Tool for Web Performance Insights
Published: 2023-09-14 18:10:45

Testers play a vital role in ensuring a seamless user experience. One essential tool in our kit is the HAR file, or HTTP Archive file. It's a log format that reveals intricate details about how a web page loads and the interactions between a browser and server. Here's why HAR files matter:

Performance Insights
HAR files break down the loading process, showing timings for DNS resolution, connection, SSL/TLS handshakes, requests, waiting for responses, and content downloading. This helps identify bottlenecks.

Network Troubleshooting
When a web page doesn't load or behaves unexpectedly, HAR files provide a history of requests and error codes, aiding troubleshooting.

Cookie Understanding
HAR files contain cookie data, helping testers understand cookie usage and potential conflicts.

Cache Analysis
They also reveal cache hits and misses, allowing testers to optimize resource caching.

Generating a HAR file is simple:

Set up your environment with Selenium, a web driver, and selenium-har-util.

Navigate to the web page of interest.

Capture the HAR file by starting and stopping a network listener.

Analyze the HAR file using tools or online viewers.

HAR files empower testers to optimize load times and ensure a smooth user experience.

Happy testing! 🚀
Setting Up Redux DevTools — A Simple Guide
Published: 2023-09-14 17:59:34

 The most important feature of Redex is the **_Debuggable_**, 
as the official [website explains ](https://redux.js.org/)

**How do we track it?
**



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



## 1-Install Redux DevTools Extension:
for 
or eny 
Or any browser, just search for this add-on according to your browser

Install the Redux DevTools extension for your browser. Extensions are available for browsers such as Google [Chrome ](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) and Mozilla Firefox.
You can find the Redux DevTools extension on your browser's extension store.
---
---

## 2 - install redux-devtools-extension:
`
npm install redux-devtools-extension --save
`
for yarn
`yarn add redux-devtools-extension
`

in stor js add that line in your code its just line 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sd3t607vh23y06shj6lo.png)
---
---
**like that
**```
import counterReducer from "./reducers/reducer"
import { createStore } from 'redux';
const store = createStore(counterReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export default store
```

**Pay attention please Its a  Basic method
**
Because there is another way as well, you can read the documents to know it, but this method is enough