teleren/devto huggingface dataset:
Intro to common components of System Architecture!
Tags: systemdesign, architecture, redis, nginx
Published: 2022-11-29 14:35:16

## 1.Intro
This is a shot blog on most common system design components you will hear. You will be learning Load-balancers, Caching and Monolithic & Microservice Architectecture

## 2.Components
I introduce you to 10 most common terms you will hear if you are learning System Architecture. Below are some of the most important concepts you need to know if you getting into System Architecture.👇

- 1.Load Balancer

A single server can't handle millions of requests at a time. So, What's the solution? Add more servers but how do we route the users to them?🤔. Here a load balancer distributes the load among the available servers. Nginx/HaProxy are some popular load balancers.


![Load Balancer Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szeyv0jh5glg7sidexll.png)

- 2.Caching 

Caching Layer is between the API and the database. When a request to retrieve a piece of data is sent the API checks the cache and if it's available it returns it to the user or else queries the database. Using a caching layer increases the speed of the read operation.


![Caching data with Redis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddc61hryxvxt9emr14on.png)

- 3.Monolithic

It is one large codebase with all the functions of your API tightly linked together. If a part of your system breaks your whole API will be down📉. Most project starts with a monolithic approach and then moves on to microservice architecture depending on their team size.

- 4.Microservice 

Independent and contained services with each service having an individual database. For ex: if the timeline service fails it does not affect the tweet service or any other service. There will be a load balancer that routes the request to desired services. Microservice architecture introduces **complexity in deploying** and **increases network latency**. Each service can talk to each other using a Message Queue like kafka. 

- 5.Scaling

Large enterprises have huge amounts of data. with the increasing amount of data each day their server should grow accordingly.
There are two types of scaling horizontal & vertical scaling

  
- **Vertical Scaling** - It means upgrading the current system.upgrading **RAM**, **CPU’s** and **hard disk drives**            
but there is always a certain limit on how much we can     upgrade.
- **Horizontal Scaling** - It means to add multiple systems to improve the performance of the service. A load balancer is needed to distribute the load to multiple systems.


![Horizontal and Vertical Scaling](https://www.cloudzero.com/hubfs/blog/horizontal-vs-vertical-scaling.webp) 

## Conclusion

This was a fairly a short blog, hope you have learned something new in this. next time I am going to be building Twitter back-end clone🔥.
🔴 Luos live keynote TODAY at 9:00 am PT on Discord!
Tags: opensource, eventdriven, news, luos
Published: 2022-11-29 14:19:00

🔴 It’s today!

Luos is hosting a live keynote today on Discord at 9:00 am PT (6:00 PM CET)

⏩ [To participate](https://discord.gg/luos?event=1044974451055411261)

Join in, Nicolas Rabault will present the new version 2.7!
How to create React Higher-Order Component in TypeScript
Tags: react, typescript, javascript
Published: 2022-11-29 14:07:20

---
title: How to create React Higher-Order Component in TypeScript
published: true
description: This short article show how to create HOC component in ReactJS with TypeScript
tags: react, typescript, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-29 13:58 +0000
---

I needed to make delay of rendering one component. The problem was that application was using same redux store for two different pages, and clear action (in useEffect) on one React Route was not fast enough and new Route was getting invalid data before it fetched new data from Backend.

So I decided to create delay higher order componenent.

This is the code:

```typescript
import { useState, useEffect, FC } from 'react';

export function makeDelayComponent<PropsT>(timeout: number, Component: FC<PropsT>) {
  return function(props: PropsT) {
    const [render, setRender] = useState<boolean>(false);
    useEffect(() => {
      setTimeout(() => setRender(true), timeout);
    }, []);
    if (!render) {
      return null;
    }
    return <Component {...props}/>;
  };
}
```

Notice that I didn't use any for props only generic type. TypeScript will figure out what is the type of the props based on types of the component you pass.

To use this component import it and wrap your component:

```typescript

import { makeDelayComponent } from './makeDelayComponent';

type GreetingsT = {
   name: string;
};

const Greetings = makeDelayComponent(0, function({name}: GreetingsT) {
   return <p>Hello {name}</p>;
});

const App = () => {
   <Greetings name="React"/>
};
```

And that's it. If you like this post, you can follow me on twitter at [@jcubic](https://twitter.com/jcubic) and check my [home page](https://jakub.jankiewicz.org/).
New leaderboard on my game Falling Square
Tags: programming, opensource, changelog, showdev
Published: 2022-11-29 14:00:00

## Falling Square v0.3.0

Last week I released a new version of my game [Falling Square](https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1&pli=1) which add some new cool features. Falling Square is a simple arcade game where the main goal is to touch squares before they go out of the screen. It currently in development, but you can download the [Android version](https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1) to test it. This project is [open source](https://github.com/EmilienLeroy/FallingSquare), you can contribute to it or create your own version of falling square.

## New leaderboard

The main features of this version is the leaderboard. It adds a bit a challenge to the game. This feature use [HighScore](https://github.com/EmilienLeroy/HighScore) (*an open source leaderboard I developed*) to work. Highscore only store your username and your score. It uses a simple session id and a cookie to retrieve your score. No account is needed to send a score. Play to the game to send a score and try to beat the current top score!

![Leaderboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe5cbgc8n5uqeixg7lkx.png)

## Internationalization
  
The second new feature is the support of two langages: **english** and **french**. If you want add another language feel free to open a pull request.

![language](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96da3c8bhgc9m3edwhwx.png)

## Better home menu

In the previous version home page contain only a single button. Now in this version menu have been updated and you can easily access to the option view or the information view. I also add some pretty falling squares to the background of the home view.

![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69c3h0sjl5ij18il4eyr.png)

## What's next

If you want to support my work you can donwload Falling Square or leave a star to the github repository of the game. In the next version **visual effect** and **sound effect** will be improved. The github repository https://github.com/EmilienLeroy/FallingSquare.

 <a align="center" href='https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img width="100" height="20" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>

Thanks you for reading this article !
Speed up your video
Tags: video, ffmpeg, shell
Published: 2022-11-29 13:28:01

In case you want a video to play faster, you have a few options:

* some video players (like [Elmedia Player (Mac only)](https://www.elmedia-video-player.com/) or similar tools) allow faster or slower playback.
* Use a video editing tool (like [DaVinci Resolve]() or similar tools) to either speed up or slow down your video
* Use the free `ffmpeg` tool on the command line to modify the duration of a video. (`ffmpeg` can perform a lot of other cool things with video, have a look at their [website](https://ffmpeg.org/).

Let's look at an example: Below you find a 6-minute video, plus a 14 second version of the same visual content... just lot's faster.

## Original (Slow) Video

{% embed 
https://youtu.be/9JfvpU9f0oc title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
%}

## High-Speed Video

{% embed  
https://www.youtube.com/embed/RNMIJwwv8aU title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
%}


## `ffmpeg` Solution

>`ffmpeg`: A complete, cross-platform solution to record, convert and stream audio and video.
 
1. Obviously, you need to install `ffmpeg` first. The [`ffmpeg` website](https://ffmpeg.org/) has instructions for you. (You can use a package manager like `brew`)
2. Open a terminal, head over to a directory containing your original (slow) video.

Now for the good stuff:

```
$ ffmpeg -i Yoda-Autoplay-compact.mp4  -vf "setpts=(PTS-STARTPTS)/5" -crf 18 yoda-autoplay-fast.mp4
```

The magic happens in the parameter `setpts=(PTS-STARTPTS)/5`, which reduces the duration to one fifth.

For the example above, I used a factor of 30 to reduce the duration from approx 6 minutes to approx 15 seconds.

Hope you find this info useful - all kudos to the `ffmpeg` developers.
Objects in JavaScript.
Tags: javascript, beginners, programming, objects
Published: 2022-11-29 12:50:34

**1. What are Objects**
Objects are one of the datatype in JavaScript which is very useful as it can store multiple type of values like: string, Boolean, int, etc. 
For example: 

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

```
Properties  
book.name= Harry Potter         
book.color= Purple
book.size= A4
```
**2. Accessing the data**
for example:

```
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age);
console.log(person.eyecolor);
```
Output:
50
blue
**3. Object Methods**
Object Methods can be accessed by using functions which are stored as properties in JavaScript.
 Example:

```
const my_object = {
  firstName: "Ronn",
  lastName : "Doe",
  uid       : 9980,
  }
};
console.log(my_object)
```
Output:
  firstName: "Ronn",
  lastName : "Doe",
  uid       : 9980,
  
**4. Accessing Object Methods**
Syntax:
object_name.property;
OR
object_name["property"]
duda
Tags: beginners, phytonbasico
Published: 2022-11-29 12:13:11

Hola, ¿me pueden ayudar con esta pregunta? Gracias de antemano a tod@s

"¿Qué imprime el código: print(""123"" + ""abc"") ?"
Grupo de opciones de respuesta

a) 123abc

b) hola mundo

c) Un error de sintaxis, no se pueden sumar strings

c) 123+abc
Rust Revolution - `r` the rust version manager
Tags: rust, shell, version
Published: 2022-11-29 12:08:55

Rust is language of the next era, at six month of Linux kernel adoption of the Rust compiler I got a weekend to build a well organized Version Management Tool. This is a MUST HAVE, if you want change easily versions in day by day mood.
Follow the link than click on the "Star" button. This is a small things for you but a HUGE results for me and give me the opportunity to build other Open Source Software. 

Thanks!

- <https://github.com/javanile/r>
Define Default URL for ActiveStorage to fix Mixed Content Error
Tags: rails, ruby, activestorage
Published: 2022-11-29 12:07:49

Using ActiveStorage with external services like AWS S3 for saving and surfing attachments like images is great. The setup is well explained in [Active Storage Overview](https://guides.rubyonrails.org/active_storage_overview.html) in [Ruby on Rails Guides](https://guides.rubyonrails.org).

But if you start using it, you will maybe encounter some problems, which are not that easy to find or debug within production. One of the problems we encountered was a [Mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) related to ActiveStorage. This was not a big problem at first. But after we added an iOS App, which was using [WkWebViews](https://developer.apple.com/documentation/webkit/wkwebview), some random redirects to AWS S3 images stopped working. We couldn't even see connections for these images to ActiveStorage in logs, which made it harder to
debug.

Read on Qameta: [Define Default URL for ActiveStorage to fix Mixed Content Error](https://qameta.com/posts/define-default-url-for-active-storage-to-fix-mixed-content-error/)
Government jobs for intermediate qualification in Pakistan
Tags: jobsinpakistan, jobsislamabad, bestjobportalinpakistan
Published: 2022-11-29 12:03:22

[Rozihunt](https://rozihunt.pk/) is Pakistan best  job portal that totally free you can search job and post job free. Here the list of the jobs in government  for intermediate qualification and also for Degree holders. Rozihunt main purpose to provide government jobs after BBA Bscs Master Matric Pass students You can upload your cv for best opportunity. Latest Governments jobs are announce daily bases where you can apply easily also if you are new startup and build team you can post your job here thousands of candidates and companies  are available. Main motive of rozi hunt is to build strong relation with new companies and small business that what to grow up. One of the top free sites for add posting or searching job in Pakistan.
Government jobs for intermediate qualification in Pakistan
Tags: jobs
Published: 2022-11-29 11:54:42

[Rozihunt](https://rozihunt.pk/) is Pakistan best  job portal that totally free you can search job and post job free. Here the list of the jobs in government  for intermediate qualification and also for Degree holders. Rozihunt main purpose to provide government jobs after BBA Bscs Master Matric Pass students You can upload your cv for best opportunity. Latest Governments jobs are announce daily bases where you can apply easily also if you are new startup and build team you can post your job here thousands of candidates and companies  are available. Main motive of rozi hunt is to build strong relation with new companies and small business that what to grow up. One of the top free sites for add posting or searching job in Pakistan.
Color Tool - (For Every Designers & Web Developers )
Tags: opensource, tooling, webdev, designers
Published: 2022-11-29 11:50:59

## **Intro**

Color is the best tool for Designers & designers who want to pick up the color so quickly than ever. Even you can combine this tool with your favorite design software like Adobe too

## **Highlights**

- easy to use
- load faster
- no need to install (portable)
- copy color instantly
- very handy
- no prior knowledge needed to use


![screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzhsn7u0m22a6xityedv.jpg)

**any supports or feedback ??**
it's much appreciated

you can find our product on this site, click below:
https://www.producthunt.com/posts/color-6
Color Tool - (For Every Designers & Web Developers )
Tags: opensource, tooling, webdev, designers
Published: 2022-11-29 11:49:31

## **Intro**

Color is the best tool for Designers & designers who want to pick up the color so quickly than ever. Even you can combine this tool with your favorite design software like Adobe too

## **Highlights**

- easy to use
- load faster
- no need to install (portable)
- copy color instantly
- very handy
- no prior knowledge needed to use


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

**any supports or feedback ??**
it's much appreciated

you can find our product on this site, click below:
https://www.producthunt.com/posts/color-6
The 3 Holy Grails for Software Engineers
Tags: webdev, programming, react, devops
Published: 2022-11-29 11:37:32

Hello, #SoftwareEngineers out there!
Bringing to you a webinar from the Head of Delivery of #Divami!

Have you wondered what are the three most underrated, yet powerful aspects of Software Engineering? 

Here they are!

1. Building Full-stack capabilities in the team
2. Maintainability of application 
3. Documentation

Gopal will take you through the importance of these topics and illustrate how embracing and implementing these aspects can bring incredible value and positive results to the developer teams in the long run!

After the presentation, we’ll open up the floor with an AMA (Ask Me Anything) session! You can ask your questions and doubts on these topics or anything related to #softwaredevelopment!

Join us!
Register here - https://bit.ly/3Uer79x
380. Leetcode Solution in CPP
Tags: cpp
Published: 2022-11-29 11:19:02

```cpp
class RandomizedSet {
 public:
  /** Inserts a value to the set. Returns true if the set did not already
   * contain the specified element. */
  bool insert(int val) {
    if (valToIndex.count(val))
      return false;

    valToIndex[val] = vals.size();
    vals.push_back(val);
    return true;
  }

  /** Removes a value from the set. Returns true if the set contained the
   * specified element. */
  bool remove(int val) {
    if (!valToIndex.count(val))
      return false;

    const int index = valToIndex[val];
    // following two lines order are important when vals.size() == 1
    valToIndex[vals.back()] = index;
    valToIndex.erase(val);
    vals[index] = vals.back();
    vals.pop_back();
    return true;
  }

  /** Get a random element from the set. */
  int getRandom() {
    const int index = rand() % vals.size();
    return vals[index];
  }

 private:
  unordered_map<int, int> valToIndex;  // {val: index in vals}
  vector<int> vals;
};


 /* Your RandomizedSet object will be instantiated and called as such:
 * RandomizedSet* obj = new RandomizedSet();
 * bool param_1 = obj->insert(val);
 * bool param_2 = obj->remove(val);
 * int param_3 = obj->getRandom();
 */
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/insert-delete-getrandom-o1/
Imposter Syndrome
Tags: beginners, programming, career, watercooler
Published: 2022-11-29 11:00:01

Today was my first login to my boot camp. The initial feeling of excitement quickly turned into feelings of being overwhelmed. So, like most people I procrastinated... I turned to any distraction that would demand even a pinch of my attention (Curse you YouTube recommendations lol). I eventually returned to my pre-work and was directed to get connected to the community and found my way to David Walsh's website where he had an article that spoke to the exact feelings that I was having. In the article he spoke about accepting the small wins and using them as momentum to grant you the confidence to take on larger tasks. Well, this post is a step in accomplishing a small task that I otherwise would not have done and as I am writing, each sentence is giving me a feeling of confidence that I can actually do this. I know it may seem corny but I hope that someone else who is just starting something new and feel like they are in over their heads can read this little post and gain some strength to push on past their feelings. Any way here is a link to the aforementioned article (https://davidwalsh.name/conquering-impostor-syndrome). Check it out! Many Blessings!
Go Channels, Waitgroups, and Go Routines
Tags: go, channels, goroutines, waitgroup
Published: 2022-11-29 10:52:33

---
title: Go Channels, Waitgroups, and Go Routines
published: true
description: Go is a powerful and efficient programming language that has become increasingly popular in recent years.
tags: go, channels, goroutines, waitgroup
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-29 10:51 +0000
---

### Go Channels, Waitgroups, and Go Routines

Go is a powerful and efficient programming language that has become increasingly popular in recent years. It has become a go-to language for many developers and is used in a variety of applications. One of the features that makes Go so powerful and efficient is its ability to use channels, waitgroups, and go routines. This article will explain what channels, waitgroups, and go routines are and how they work together to help speed up development and improve the efficiency of applications.

### What are Go Channels? 
Go Channels are data structures that allow a program to send and receive messages between goroutines. These messages can be of any type and are sent over a channel, allowing for communication between goroutines without having to use locks, mutexes, or other synchronization techniques. A channel can be buffered, meaning that messages can be sent even if the receiver is not yet ready to receive them.

### What are Waitgroups? 
Waitgroups are a synchronization primitive that let you wait for a group of goroutines to finish executing. Waitgroups can be used to ensure that all goroutines have finished before continuing execution. This allows for synchronization and coordination between different threads of processing units.

### What are goroutines?
Goroutines are lightweight threads of execution. They are used to run functions concurrently and can be used to speed up the execution of certain tasks. Goroutines have access to the same memory address space and can share data, allowing multiple goroutines to efficiently work together.

### How do Channels, Waitgroups, and Goroutines Work Together? 
Channels, waitgroups, and goroutines can be used together to create efficient applications that are capable of performing multiple tasks simultaneously. By using channels, waitgroups, and goroutines together, developers can create applications that can perform multiple functions at the same time, allowing them to create more efficient applications.

### Conclusion 
Go Channels, waitgroups, and goroutines are powerful tools that can be used to create efficient applications. They allow for communication between goroutines and can be used to synchronize tasks and speed up development. By using these tools together, developers can create powerful applications that can perform multiple tasks simultaneously.
How to add generic style in Vue Styleguidist
Tags: vue, vuestyleguidist, javascript
Published: 2022-11-29 10:45:03

If you want import style into vue styleguidist build like you import global style in App.vue just edit your styleguid.config.js :

```javascript
// styleguid.config.js 
const path = require('path')
module.exports = {
	require        : [
		path.join(__dirname, 'src/assets/styles/global.css')
	]
}
```
Our interview about microservices trends in 2022
Tags: go, intervie, webdev
Published: 2022-11-29 10:36:56

Microservices are quickly becoming one of the most popular software architectures. Anthony Cherepanov, Sales Executive at Singula team, gave an interview about microservices trends in 2022.

[Here you will find answers](https://medium.com/evrone-en/should-you-use-go-to-develop-your-project-in-2022-interview-with-the-singula-team-fbcef631333a) to the questions: are microservices suitable for your project, and why should you choose Go/Golang-developers for your tasks?

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