teleren/devto huggingface dataset:
I'm Joining Rainway 🚀
Tags: career
Published: 2021-11-09 16:04:43

Hello, I'm Ben Greenier. You might know me from my WebRTC work at Microsoft, where I helped create and improve things like [Mixer](https://goodbyemixer.com), [browserd](https://github.com/bengreenier/browserd), [webrtc-unity-plugin](https://github.com/bengreenier/webrtc-unity-plugin), early versions of [winrtc](https://github.com/microsoft/winrtc), and [MixedReality-WebRTC](https://github.com/microsoft/MixedReality-WebRTC). I also had a chance to work on closed-source software [directly with external engineering teams](https://devblogs.microsoft.com/cse/) to solve all kinds of problems, though I primarily focused on those in the real-time media space. I chose to leave Microsoft in June 2021 to decompress after a challenging stint working on Microsoft Teams. I wanted to build some tech to [help make creating games more approachable](https://faster-games.com), and take some time to figure out what I wanted to do next. I also had the extreme privilege to be able to actually do that, so I did.

In parallel, I'd been following the work Rainway was doing on their journey to create an ultra-low latency streaming solution. I first heard about them through Twitter and [their work with Xbox Cloud Gaming](https://rainway.com/blog/2021/04/19/xbox-cloud-gaming/) - which is pretty impressive. It was actually through Twitter, that I found myself sitting down for a slice of pizza with Rainway's CEO, [Andrew Sampson](http://twitter.com/andrewmd5) to learn more about what they're building these days. Suffice it to say I was pretty impressed. 😁

You can learn more about Rainway's ongoing work on [the Rainway blog](https://rainway.com/blog) - I'm especially excited about the opportunity to work with a bunch of great folks, use Rust, explore the in's and out's of [Bebop](https://rainway.com/blog/2021/08/30/bebop-rust/), and of course to help make creating ultra-low latency applications much easier for folks.

I'll be starting in a few weeks, and hope to be able to share more with you about the work we'll be doing together going forward! 🚀

💙🌈
-Ben
Cool Python elements that I recently discovered!
Tags: python
Published: 2021-11-09 15:43:21

Working on some Python projects, we need sometimes to have more options to declare some methods or parameters.
Here are two elements that I found which are really useful!

---

# Union
Sometimes to reuse a method we need to accept several kinds of parameters *(a number as int or string for example)*.

One easy way to do it is to use an **Union**.

```python
...
def function_a(param: Union[int, str]) -> None:
...
```
Declared like this, you are now able to recieve both type to do your treatment.

## Links
- https://mypy.readthedocs.io/en/latest/kinds_of_types.html?highlight=Union#union-types


---

## Optional
In some cases we need to have empty values and we want to do it properly.
A way to do it is with **Optional**.

> Optional[str]

With this, no need to add a specific description in your documentation to say *this value can be equal to None* it will immediatly be explicit!

```python
...
def concat(x: Optional[str], y: Optional[str]) -> Optional[str]:
...
```

The rest of the code won't change, you will test if the value is **equal to None or not** to know if a value is available or not.

## Links
- https://mypy.readthedocs.io/en/latest/kinds_of_types.html?highlight=Union#optional-types-and-the-none-type

---

I hope it will help you! 🍺
🔥 El infierno de var
Published: 2021-11-09 15:32:53

¿Que crees que imprimirá por pantalla este fragmento de código?

    for (**var** i = 1; i <= 5; i++) {
        setTimeout(function() {
            console.log("Pues...",i);
        }, 1000);
    }

*SPOILER*….

…………

…………

…………

…………

…………

…………

…………

Si tu respuesta fue Pues...6 ¡estás en lo cierto!, además te aparecerá justo una línea más arriba un numerito que identifica el número de setTimeOut lanzado. Este es aleatorio y a priori no sirve para nada, ¡solo FYI!

### ¿Sabes por qué?

Cuando declaramos una función con**var**, el ámbito es su *contexto de ejecución* en curso*,* que puede ser la función que la contiene o un ámbito global. Entonces podemos esperarnos resultados inesperados. Es por eso que es mejor que intentes evitar declarar variables con la palabra var. ¡pasa de eso!.

Sin embargo… ¿que pasa si lanzamos este mismo fragmento de código?
Nótese el cambio de ***var*** por ***let***

    for (**let** i = 1; i <= 5; i++) {
        setTimeout(function() {
            console.log("Pues...",i);
        }, 1000);
    }

Sí amiguitos, ahora nos ejecuta el bucle tal y como deseamos. Gracias a la magia del scope, es una **variable local** que solamente está definida dentro de la función.
>  ***RECAP***: ¡No al var, si al let! (o const!)
Instalar MariaDB en FreeBSD raspberry pi 3b+
Published: 2021-11-09 15:30:33

## Guía para instalar mariadb en freebsd

`Esta guía esta creada en freebsd 13.0-release aarch64`

Lo primero que vamos hacer es actualizar freebsd para ver si llegaron nuevas actualizaciones y una de esas actualizaciones sea mariadb:

```
# -> root
$ -> user
```

`# pkg upgrade`

![Eshot_21.11.01_13.47.45.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635792476767/5iaN3zTKF.png)

una vez verificamos que actualizo, consultamos si en los repositorios de freebsd esta mariadb con el siguiente comando:

`# pkg search mariadb`

![Eshot_21.11.01_13.52.54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635792782570/MQJNlA8-x.png)

instalamos la última versión recibida para freebsd, *mariadb105* instalamos **client** como **server**.

`# pkg install mariadb105-server mariadb105-client`

![Eshot_21.11.01_14.04.32.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635793491762/umsvPUESv.png)

presionamos "y" luego presionamos enter y esperamos que termine de descargar e instalar para configurarlo.

Nos dirigimos a la ruta de configuración antes de montar el servicio, configuramos el servidor.

`# vim /usr/local/etc/mysql/conf.d/server.cnf`

En **[mysqld]** nos dirigimos a bind-addres y cambiamos 127.0.0.1 a 0.0.0.0. Para poder conectarnos a mariadb instalada en freebsd en la raspberry desde otra computadora.

```
[mysqld]
bind-address                    = 0.0.0.0
```
para activar el servicio de mariadb primero debemos configurar el `/etc/rc.conf` agregandole `mysql_enable="YES"`, lo podemos hacer con el siguiente comando:

`# sysrc mysql_enable=YES`

una vez ejecutado el comando ahora si procedemos a activar el servicio de mariadb con el siguiente comando:

`# service mysql-server onestart`

si todo sale bien, ya tendriamos configurado e instalado mariadb en freebsd en la versión 10.5.12

![Eshot_21.11.01_14.41.03.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635795726210/KvqiR6oHQ.png)
Simple algorithms for javascript and beginners java
Tags: javascript, java, beginners, algorithms
Published: 2021-11-09 15:08:44

Learning to code is one thing, using that code to solve real world problems is another. Programming goes way beyond writing down functions and declaring variables. If you are like me, starting out with your stack then you'll definitely want to checkout these algorithms.

I recently came across<a href="https://www.hackerrank.com/"> hackerrank.com </a>a website which provides questions (or algorithms if you like) for you to solve. There are different levels (I'm a javascript begginner lol), and there are sets of test you run your code against. You can also choose your preferred language to code in

You should try it out. It's great! Gives you a chance to think and try out different ideas to solve a problem

I recently solved a few problems in <a href="https://github.com/Babi-B/simple-java-algorithms" target="_blank">javascript (github)</a> and <a href="https://github.com/Babi-B/simple-algorithms-js" target="_blank">java (github)</a>. They validated all their tests! 😄

Join me on ths <a href="https://www.hackerrank.com/domains/tutorials/30-days-of-code/">hackerrank 30-day challenge</a> and work that brain 🙃
Object Destructuring
Tags: javascript, objects
Published: 2021-11-09 15:04:09

While learning how to write forms in React I learned about an interesting syntax in JavaScript called destructuring. It can be used on arrays as well as objects to quickly extract elements. Here's an example:

```
const hero = {
   name: 'Wonder Woman',
   realName: 'Diana Prince'
};

const { name, realName } = hero;
name;     // => 'Wonder Woman',
realName; // => 'Diana Prince'
```

This is so cool. Instead of having to create variables for each element inside the object like this:
```
const name = hero.name
const realName = hero.realName
```
You can simply grab any element after writing one line of code: 

```
const {prop1, prop2, ...} = object
```

[More details here from a very smart human](https://dmitripavlutin.com/javascript-object-destructuring/).
Design Systems
Tags: softwaredeveloper, freelancers, greatatwork, designsystems
Published: 2021-11-09 15:02:20

---
title: Design Systems
published: true
date: 2021-11-09 14:57:35 UTC
tags: softwaredeveloper,freelancers,greatatwork,designsystems
canonical_url: https://medium.com/@bass41992ben/design-systems-20bcb5b00c9f
---

![](https://cdn-images-1.medium.com/max/1024/0*a6fCL8Q-_r7YF8Y8)
_Photo by Randall Ruiz on Unsplash_

This weekend I dove deep into design systems. And deep is somewhat relative because before the weekend, design systems were an abstract idea to me. Now, they are less abstract.

#### Do We Really Need One?

This is where the very annoying and frustrating answer comes in of, ‘it depends.’ If you are a beginner developer, most likely you need a design system in the form of one that has already been created. If you are a beginner developer focusing on CSS, you might want to make your own to standout. If you are just focusing on layout, unless it is important to make custom layouts, reach for something already implemented like Bootstrap.

Everyone uses a design system in some way. Either you struggle through making your own, or you reach for an already existing one. Both options are great when they are the best option. And we all know someone who says, ‘Don’t use bootstrap (or fill in the blank ‘other design system’)’ but who then tries to do it custom and it looks terrible.

So ‘do we really need one?’ is not the right question because you use one anyways, no matter how well or not well it is used.

**But when do we really _need_ a design System?**

If you are going it solo, learning to code, and building projects, I don’t think you really need to focus on a design system. Over time you will get there. By that I mean, you will see the need for one eventually and at the moment is when you want to take advantage of one.

Why? What are the perks?

Ultimately the best perk of a design system is _standard._ Whether as a freelancer, startup, or a large company, you will need some defined ‘way of doing things.’

This can vary from project to project and can even be a part of the process for your client, if you are a freelancer or startup. But if you are a larger organization that is well established in what it is doing (think Mailchimp), then it is a really good idea to have a defined way of doing things as a company.

Benefits include:

- Less ‘reinventing the wheel’
- Easier onboarding for new hires
- Helps with onboarding clients
- Lets you focus on what you ‘want to do’ in a project
- Helps eliminate ‘technical debt’
- Creates team cohesion and empathy
- Creates common language across entire team

As with most of the stuff I have written about, a Design System will force the company to be introspective and potentially change some things. This will be difficult because everyone wants speed because speed means more and more means $$$$.

Or at least we think that. I am opting for a different option. An initially slower option. A tortoise if you will that once you cross the finish line you will have a system that not only helps you move quicker but a system that gives you and your people more value.
Freelancing kills learning?
Tags: programming, beginners, career, javascript
Published: 2021-11-09 14:51:36

Hi, my name is Saifullah Usmani. I am a Programmer and a Graphic Designer. I have been programming for almost 5 years now. And I have worked with several freelance clients.

If it sounds like a thing that will add value in your life then consider following my page because I keep creating quality content for you.

---
**NOTE:** This is gonna be a topic which you can disagree. It is just my personal opinion.

###Do not start freelancing until your education period ends:
Well so many of you may be freelancing and I also have a series on how to be good in freelancing as a developer which got attention and also got featured in the top week's post  but this topic is based on my personal opinion.

The reason I am saying this is because this takes your freedom of experimenting and learning new things. Your time becomes limited and you have a responsibility and then people also starts to depend on you.
This is the worst condition when you cannot do what you love to do with code. I love to code all day on my stupid ideas, create simulations games websites work with physics automation ML AI etc. 
I want to learn all that fun stuff in much more detail.
But now I really don't have time to spend on them. Even if I do, it feels like I am wasting the time. 
I can only do freelance work all day. Which is getting boring. Making only websites that my clients want. Making what they like.
So I am feeling not good about freelancing in general and this is the moment I started writing this post. I may be lacking motivation. But the thing is I don't need motivation to code I love to code. It is just the restriction that I don't want at this moment. So I am going to do something about it and I believe I will come up with a better solution to buy some time. I know time cannot be bought. It is just a metaphor but I want to turn it into reality.

I think this is the time to experiment and learn. Learn as much as you like and learn anything you like. Freelance is like a job and it restricts you. So don't go for money when it is time to learn. I am gonna give freelancing a pause and do the fun stuff I like. When I complete education I will start it again properly but till then I will only do it when I need extra money for something.
If you have any advice for me please write them in the comments. Do you think that my point is correct of using the education period to learn and not earn?




[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝
5 CSS shortcuts
Tags: css, webdev, beginners
Published: 2021-11-09 14:47:55

It's amazing how long I didn't know about these. They make my style sheets much more clean. 

I hope they do the same for yours. :-)

## 1/ List properties, made simpler:
![css-list-properties-short-cut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3teomvz9himdjgazyl3o.png)

## 2/ The background property, made easier:
![css-background-property-short-cut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/depn1pjac476j47o34d4.png) 

## 3/ Font and line-height properties, made like a pro:
![css-font-line-height-properties-short-cut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7r5vb3ysezrqwiih3qd.png) 

## 4/ Margin and padding properties, made how they should be:
![css-margin-padding-properties-short-cut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9zloe4z7g315ygnoqjn.png) 

## 5/ Border property, made with love:
![css-border-property-short-cut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5flfy8rcwe5d8u4q17u.png)
Super fast lightweight sliders and carousels
Tags: javascript, css, webdev, performance
Published: 2021-11-09 14:46:51

## Sliders and Carousels
Sliders and carousels are on most websites used for presenting all kinds of content - and especially also to show images for i.e. product details etc.

They all need to work really well on mobile - meaning that touch support, performance and UX has to be really good.

### Old world
The solution to this is a using some sort of javascript library that handles this. Most of these work using a number of events on the DOM to detect touch, movement, dragging etc. And then a good chunk of code to handle the actual sliding using animations and moving around with html elements.

The result of this approach are some relatively big javascript libraries that easily takes 25-100kb - and because of the amount of js, it is not easy to get really good performance, WCAG support is somewhat lagging and setup is relatively complex.

### New world
Luckily browsers evolve quickly and the sliding and carousel experience can be handled using native browser features - and simple div overflows.

By utilizing scrolling, especially the touch support can be greatly improved since all browsers, devices and their input methods supports scrolling. 

Also loading, event listeners, animations, moving divs around are no longer needed - the browser takes care of this.

The result - super performance and touch support!

### The basic approach
* Create a div with `overflow-x` set to auto
* Indside that div, create a CSS grid using `display:grid` and grid-* options to create columns that will be the slides
* Use scroll snapping by utilizing `scroll-snap-type: x mandatory` and `scroll-snap-align` to ensure slides stick to the sliding container.

```
<style>
    .slider {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        display: grid;
        grid: auto / auto-flow max-content;
        grid-auto-rows: 100%;
        grid-auto-columns: 100%;
        grid-auto-flow: column;
        grid-gap: 1rem;
        align-items: center;
        height: 100%;
    }
    
    .slider>* {
        scroll-snap-align: start;
    }
</style>

<div class="slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
</div>
```

That's it - and then a little bit of JS on top to enable navigation buttons and indicators, some css to style the thing up and voila!!

![Example slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kngmnlj4e9nxpwst8jlv.png)

Based on this concept and bringing it to live on real solutions this is now wrapped and packed in a small css and javascript module.

See examples and documentation at https://swiffyslider.com/

Find it on Github https://github.com/dynamicweb/swiffy-slider

Or take it from NPM:
```
npm install swiffy-slider
```
CSS basic 8 - :hover, :active, :focus
Tags: css, hover, active, focus
Published: 2021-11-09 14:29:47

#:hover
<code><strong>:hover</strong></code> is CSS pseudo-class and it matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over(mouse over) an element with cursor.
But you cannot detect when you hover something on mobile devices or devices with touch screen, hover is being used less and less now.
```css
/* selects any <a> element when "hovered" */
a:hover {
 color: pink;
 background: black;
}
```
#:active
<code><strong>:active</strong></code>is used to select and style the active link or button is being clicked. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.(A link become active when you click it)
```css
/* selects any <a> that is being activated */
a:active {
  color: blue;
}
```
:active pseudo-class is commonly used on <code>&lt;a&gt;</code>
 and <code>&lt;button&gt;</code> elements. But :active selector can be used on all element not only links. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.
```html
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
```
```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#:focus
<code><strong>:focus</strong></code> is ues to select the element that has focus. It generally triggered when the user clicks or taps on an elements or selects it with the keyboard's <code>tab</code> key.(:focus selector is allowed on elements that accept keyboard events or other user input)
```css
/* selects any <input> when focused */
input:focus {
  color: green;
}
```

Practice
```html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover, active, focus</title>
    <style>
        .one {
            background: blueviolet;
            width: 100px;
            height: 100px;
            transition: all 2s;
        }

        .one:hover {
            background: red;
            width: 200px;
            height: 200px;
        }

        .btn {
            border: 4px solid palevioletred;
            border-radius: 4px;
            padding: 30px 60px;
            background: none;
            color: palevioletred;
            font-size: 32px;
            transition: all .3s;
        }

        .btn:active {
            background-color: purple;
            color: white;

        }

        .box:focus {
            background: red;
            color: white;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <input type="text" class="box" placeholder="cilck here!">
    <button class="btn">Click Me!!</button>
</body>

</html>
```


*Use the :link selector to style links to unvisited pages, :visited selector to style links to visited pages.
App/ Future 
Published: 2021-11-09 14:20:15

## App
If I could build an app, it would be a carpooling app. This app is similar to Uber. It would be as widespread as any major social media application and would be integrated into people's daily lives. Essentially, if a user with a vehicle has space in their car they will go on the app and alert people near their vicinity that they will be going to a specific place and that they have space in their car to pick up people. There will be a window for how long the user waits for people to request to join their ride. They can choose to not pick up anyone, but if the people are enroute to their location, then they will pick them up. This app is extremely convenient, saves time, saves money, and decreases overall traffic. This app is for people with a car who want to help others and for people who need a ride. 

The major constraint for this app and the reason why this app would never work is that our society is too dangerous. This app can only work if we trust that nothing will happen in the car once the driver picks up the rider. We have to trust that the driver is actually going to the location they specified, that the rider is safe, and that they both don't mean any harm. We can't guarantee anything so this app might create more danger than assistance. I wished society didn't have any ill intentions and would solely use this app to help people and provide overall convenience. If there was a way we can assure people would use the app for its sole purpose, then I would love to create this app. 

## Future
If income did not matter, if time did not matter, if all careers were all valued the same, then I would want to be a student and teacher for the rest of my life. I love learning new things. If I had the time I would like to take one class per semester so I will always be learning something. 

Growing up, I always admired my teachers. I was especially appreciative when I noticed how happy they are when they saw their students understanding and learning the material. I also had a couple of experiences being a tutor and I was extremely content when the material finally clicked with the student. I wished teachers were paid more especially due to how integral to the advancement of society they are, however, this career is undervalued and would take too long/ longer for me to reach my personal goals.