teleren/devto huggingface dataset:
The Dangers of Shipping at All Costs w/ CEO & Cofounder of 33 Teams, Drew McManus
Tags: devops, podcast, management, productivity
Published: 2022-07-21 17:13:10

In a field like engineering, to have a truly unique 30,000-feet view of the profession, you need someone with 30 years of experience in adapting, innovating and creating in the space.

That’s why we were so excited to talk to Drew McManus, CEO and Cofounder of 33 Teams.

An engineer who’s helped shape the formative years of Apple, Adobe and so many more companies you have on your phone right now, Drew McManus is now advising rapidly growing dev orgs across the world at 33 Teams.

Drew is an oracle (no pun intended) on how to see dev orgs as living organisms, identifying the structural, psychological and technological maladies keeping teams from becoming who they aspire to be.

In our conversation, we touch upon everything from tech debt, to unlocking creativity to the all-too-common danger of shipping at all costs.

If ever there was a way to download 30 years of engineering leadership in one hour, this is it.

{% spotify spotify:episode:3fycsCNrxMdKvR1vnOUyFt %}

## Episode Highlights Include:
* (2:20) What is 33 Teams all about?
* (7:45) 2 simple questions all teams need to be asking
* (20:22) The importance of curiosity
* (27:21) Fictional rivalries between teams
* (34:02) Common pitfalls startups can avoid
* (39:09) Dangers of shipping at all cost

## Engineering Insights before anyone else....
*The Weekly Interruption is a newsletter designed for engineering leaders, by engineering leaders. We get it. You're busy. So are we. That's why our newsletter is light, informative and oftentimes irreverent. No BS or fluff. Each week we deliver actionable advice to help make you - whether you're a CTO, VP of Engineering, team lead or IC  - a better leader.*

*It's also the best way to stay up-to-date on all things Dev Interrupted - from our podcast, to trending articles, [Interact](https://devinterrupted.com/event/interact/) & our [community Discord.](https://discord.com/invite/devinterrupted)* 

### [Get interrupted.](https://devinterrupted.com/subscribe/)

![Weekly Interruption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj1owca0068hk9f2gd11.png)
Tools for a B2B App?!
Tags: help, javascript, nextjs, tutorial
Published: 2022-07-21 17:02:00

Hi, i have an idea of building a B2B app where a person can go to the website, submit a job, and then have other people (workers) complete the job and get paid for it. So the employee would have to deposit his money, and on the job details ask how much he wants to pay each worker, now he can choose to give him a satisfied rating and pay him, non-satisfied rating and not pay him, or ask the worker to revise ( re-do what he did wrong ), now my problem is, how would i go about handling the payments, i have an idea of each user have is own wallet and when depositing into the platform, i would add that amount to that wallet where he could spend the money, now how would i go about charging from his wallet every time he gives a satisfied rating, should i just have a function where when he gives a satisfied it immediately updates his wallet balance charging for that job the worker did and then update the worker wallet balance with his payment? or should i do it in another way?

I am going to use React & Next Js
and for database storage and user handling ( auth ) i was thinking of Supabase, since i have done an App with it and loved it.
F# Convert a List of Type A to Type B with options
Tags: programming, dotnet, fsharp, beginners
Published: 2022-07-21 16:42:43

The purpose of this article is a small demonstration of how one can convert a list of one type to another type in F#. While 'Convert' is used in the header, this is really using the 'map' function and returning an entirely new list.

The below code was written in a `console application` in `.NET 6`

```C#
type Person = {
    name: string    
}

type Employee = {
    email: string
}

let ConvertPersonToEmployee
    (person: Person) : Employee =
    {
        email = person.name + "@fsharp.com"
    }
    
let ConvertPersonListToEmployeeList
    (people: List<Person> option) : List<Employee> option =
    match people with
    | None -> None
    | _ -> people.Value
           |> List.map ConvertPersonToEmployee
           |> Some

[<EntryPoint>]
let main argv =    

    let januaryJoiners : List<Person> option = Some [{ name = "Rob" }; { name = "Bob" }]
    let februaryJoiners : List<Person> option = None
    
    let januaryEmployees = ConvertPersonListToEmployeeList januaryJoiners
    let februaryEmployees = ConvertPersonListToEmployeeList februaryJoiners
    
    printfn $"January Employees: {januaryEmployees}"
    printfn $"February Employees: {februaryEmployees}"
    0
```

**Output**
```config
January Employees: Some([{ email = "Rob@fsharp.com" }; { email = "Bob@fsharp.com" }])
February Employees: 
```
Two years of dev.to - let's celebrate with a "Dance Dance Revolution" clone! 💃🕺🎉
Tags: showdev, webdev, javascript, watercooler
Published: 2022-07-21 16:19:00

Time to celebrate!

Today marks my two-year anniversary on dev.to! With a total of 52 published posts, that's roughly one every two weeks!

And what better way to celebrate than with "Dance Dance Revolution"? The game's rules are explained quickly:

 * Boxes come down four different lanes from the top
 * As soon as the lanes hit a scoring zone (or even better: the green sweet-spot!), you need to press the correct arrow key to score points
 * Any non-correct key-press (or too early or too late) will cost you one of 10 lives

Some disclaimers, though:

 * The code is by far not the cleanest!
 * The music is royalty-free
 * Sometimes, the arrow icons take a few seconds to load
 * Wait for all the arrows to disappear before starting a new game. It might deduct lives upfront otherwise

This clone is best played on a computer with a keyboard and in a separate window.

{% codesandbox dance-dance-revolution-clone-pkgpiw %}

Have fun!

**What's your high score? Leave a comment down below!**

---

*I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a* ❤️ *or a* 🦄*! I write tech articles in my free time and like to drink coffee every once in a while.*

*If you want to support my efforts,* [*you can offer me a coffee* ☕](http://buymeacoffee.com/pthormeier) *or* [*follow me on Twitter* 🐦](https://twitter.com/pthormeier)*!* *You can also support me directly via [Paypal](https://www.paypal.me/pthormeier)!*

[![Buy me a coffee button](https://dev-to-uploads.s3.amazonaws.com/i/x55hp6jopwyy161d8e2u.png)](http://buymeacoffee.com/pthormeier)
More Code in Less Time
Tags: productivity, programming
Published: 2022-07-21 16:15:56


Even if you're a morning person ☀️, **you probably need some time in the morning to start being productive**.


For me, the most time-consuming part until I actually start writing new code is "reloading" the context of what I'm doing and understanding what is the next step.
And the more this context and next step is clear to me- the faster (and less intimidating) it is for me to get going!

## The Best Way to End Your Day

That's why I try to always end my days like this:

- A hint about where I'm stopping, i.e a specific comment like  `//look at <component name> and create a similar version in <other place>` or `//test also for mobile`
- If I can end the day in a commit, that's best but if I don't have anything wrapped up enough- stash + a very readable name! 

## The Worst Way to End Your Day
- In the middle of a pile of sh*t 💩- with lots of code commented out, console logs and not having any idea what's going on!
- In this case, if my time's up (kids...) it's better to revert to a clean slate and start anew tomorrow, but again **I leave myself a hint or specific task** like: `//Make this load only when needed`.

**What's your end-of-day routine like?** Or, do you have any more tips to get the flow going? 😊 Leave your thoughts here!
One-Tier Architecture
Tags: architecture, webdev, beginners, help
Published: 2022-07-21 15:57:00

## Single tier Architecture

All services that are needed to build an application will be configured inside a single server that also handles requests and responses.

Basically, an application needs a webserver(httpd, nginx etc) ,app server(JBoss, Tomcat, Glassfish) and finally database server(mysql, oracle, mongoDB etc) to work effectively, so in a single server architecture all the above mentioned components will be configured in a single server. The server's private IP will be used for all communications between the web, app, and database.


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


In a single-tier architecture,all the services will be on the same machine using the same resources, which can create an availability risk. If the server is down, then the entire application will be down. Single tier is suitable for simple applciations or sites with low traffic.

Below is a basic diagram of a single tier architecture.


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

You can see from the above diagram that user requests are routed through the firewall to a single server, and that all communications take place solely between the user and the server.


**Advantages**
1) Cost effective
2) Simple and uncomplicated design
3) Faster communication between App, Web and Database services

**Disadvantages**
1) Less Availability
2) Higher down time



Cheers🥂🚀
Keep Learning!
Refactoring GTK keyboard
Tags: rust, gtk, gui, beginners
Published: 2022-07-21 15:56:54

In my [first post](https://dev.to/antonov_mike/making-gtk-keyboard-on-rust-2fma) on this site, I talked about creating a keyboard. I think it's time to rework the text a bit to make it easier to read. I made one more file named buttons.rs it contains buttons, entry and label implementations.

```Rust
use gtk;
use gtk::{Button, Entry, Label};

pub fn create_button(label: &'static str) -> Button {
    let margin = 2;
    Button::builder()
        .label(label)
        .margin_start(margin)
        .margin_top(margin)
        .margin_end(margin)
        .margin_bottom(margin)
        .build()
}

pub fn create_entry() -> Entry {
    let margin = 2;
    Entry::builder()
        .margin_start(margin)
        .margin_top(margin)
        .margin_end(margin)
        .margin_bottom(margin)
        .build()
}

pub fn create_label(label: Option<&str>) -> Label {
    let margin = 2;
    let text: &str = label.unwrap_or("default string");
    Label::builder()
        .label(text)
        .margin_start(margin)
        .margin_top(margin)
        .margin_end(margin)
        .margin_bottom(margin)
        .build()
}
```
We can’t add Option to .lebel() we have to convert Option into str `label.unwrap_or("default string")`.
Add buttons.rs to main.rs file

use gtk::prelude::*;
```Rust
mod gui;
mod buttons;
```

Add functions as crates to gui.rs
```Rust
use crate::buttons::create_label;
use crate::buttons::create_entry;
use crate::buttons::create_button;
```
And declare buttons, labels and whatever you want following this example
```Rust
let button_1 = create_button("Button 1");

let counter_label = create_label(Some("0.0"));

let label_time = create_label(None);
```
What are the Three Variables in JavaScript?
Tags: javascript, beginners, webdev, tutorial
Published: 2022-07-21 15:46:00

There are three ways to declare a variable and give it a value in modern [JavaScript](https://maxlockwood.dev/what-is-javascript/):

- var
- let
- const

A variable is a container for a value, such as a string or a number we might use in a statement or as part of a sum.

## var

Back when [JavaScript](https://maxlockwood.dev/what-is-javascript/) was first created, this was the only way to declare variables.
When declaring variables in earlier versions of JavaScript, the **var** keyword was used instead of **let**:

```javascript
var name = “Andrew”;
```

The current method of declaring variables, **let**, has a number of benefits over **var**.
For instance, var permits re-declaration of variables with the same name, whereas **let** generates an error.

It is recommended to use let instead of var, when declaring variables.

## let

The let keyword was introduced in ES6 (2015). A block scoped variable in JavaScript is declared with the **let** keyword. Variables defined using the **let** keyword are block scoped in contrast to those declared using the **var** keyword, which is often used to declare a variable in JavaScript and is handled as a standard variable.

Variables are created using the **let** keyword like this. Creating a variable in JavaScript is called “declaring” a variable:

```javascript
let name;
```

**name** is the name of the variable

After creating the variable, we can initialise it with a value:

```javascript
name = 'Tom';
```

The equal sign (`=`) is used to assign a value to our variable.

We can also assign our variable a value during creation, like this:

```javascript
let name = 'Tom';
let age = 34;
```

Remember, that we need to enclose text values in quotes.

After initialising a variable, we can output its value, using a method called console.log:

```javascript
let name = 'Tom';
console.log(name);
```

Variables can change their value during the program.

```javascript
let age = 34;
age = 24;
console.log(age);
```

Updating the value of a variable can be done as many times as needed.

## const

The const keyword was introduced in ES6 (2015). Constants are similar to variables and are declared using the **const** keyword:

```javascript
const color = 'green';
console.log(color);
```

Constants must have a value when declared and they cannot change their value.

Constants are very useful. If you use const, it tells anyone looking at your code that this name will never be assigned to a different value.

Things to note about Constants:

- Variables defined with const cannot be Redeclared
- Variables defined with const cannot be Reassigned
- Variables defined with const have Block Scope

If you want to learn more about JavaScript variables, MDN Web Docs is a wonderful resource – [Storing the information you need — Variables](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables)
3 Ways of Type Transformation in Typescript
Tags: typescript
Published: 2022-07-21 15:39:00

When we use types or interfaces, the typescript compiler enforces the object fit with them to avoid runtime errors for missing fields.

Sometimes we want the flexibility to create an object without breaking the contract with the interface type.

For example, we have the interface `User` with all properties required.
```typescript
interface User {
  username: string;
  password: string;
  roles: string[];
  active: boolean;
}
```
Maybe we want to create a user and later call the API to get the roles. If we try to make the object without all the properties, the compiler shows an error because it doesn't fit with the interface.

![Error compilers missing properties](https://cdn.hashnode.com/res/hashnode/image/upload/v1658248148850/qMSblSVr5.PNG)

In most cases, we change the property to optional `roles?: string[]` and to allow compiling, but we know it is a cheat.

Typescript provides the utility to work with it: 

`Partial`: Create a new type with all properties as optional from the type:

```typescript
let admin: Partial<User> = {
  username: 'admin',
  password: 'admin'
}
```
Thanks to @lukeshiru contribution, I learn other ways to deal with it:

> `Partial` makes every property optional. Maybe it is not what we want. 

Typescript provides other Utility types, [Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) and [Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys) let play with it.

`Omit`: Create a new type taking all properties from the type and removing the keys.

```typescript
type UserWithoutRoles = Omit<User, "roles">;

const userWithoutRoles: UserWithoutRoles = {
    username: "admin",
    password: "admin",
};
```
`Pick`: Create a new type from the type and pick a set of properties.

```typescript
type UserWithStatus = Pick<User, "username" | "active">

const userWithStatus: UserWithStatus = {
    username: "dany",
    active: true
}
```
Thanks again to @lukeshiru  :) 

> Learn more about [Typescript Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html) 

Read more articles in [www.danywalls.com](https://danywalls.com)

Foto de <a href="https://unsplash.com/@scw1217?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Suzanne D. Williams</a> en <a href="https://unsplash.com/es/s/fotos/transform?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Affirmations vs. Afformations
Published: 2022-07-21 15:35:26

Well as you most likely are aware an Affirmation is an assertion of something that you need to be valid.

The explanation you realize this is on the grounds that each book in conventional achievement writing that large number of old books advised you to utilize Affirmations.

Thus, at my live occasions at my virtual preparation occasions and in my courses something that I like to do with my training clients is have them say a conventional Affirmation.

Click **[here](https://noahstjohn.com/affirmations-vs-afformations)** for more details about this.
CMS Sync between different machines
Tags: discuss, help, cms, tooling
Published: 2022-07-21 15:22:50

---
title: CMS Sync between different machines
published: true
description: How to sync local CMS build between multiple dev machines.
tags: #discuss #help #cms #tooling
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Currently I used a single laptop that I take between work and home depending where I'm working each day. Especially in the recent hot weather this is becoming uncomfortable.

Ideally I'd like a machine at work and at home, but syncing our CMS builds between machines each day is time consuming and not reliable.

We of course use Git for all files and luckily the CMS we build in (CraftCMS) uses config files that are pretty Git friendly these days.

CMS Uploads go to AWS S3 buckets so I don't need to worry about syncing those, the issue lies with syncing the DB. Any text or asset fields need to be synced between machines so I can continue work each day.

I suppose I could manually take a DB backup at the end of each day and commit it to git so its ready for the next day, but this isn't full proof and if I forget one day, the next day I need to redo a load of work to get back to where I was.

Does anyone else have this issue and any potential solutions?
Promises in JavaScript
Published: 2022-07-21 15:22:00

JavaScript is a single-threaded programming language, that means only one thing can happen at a time. Before ES6, we used callbacks to handle asynchronous tasks such as network requests.

Using promises, we can avoid the infamous ‘callback hell’ and make our code cleaner, easier to read, and easier to understand.

Suppose we want to get some data from a server asynchronously, using callbacks we would do something like this:

```
getData(function(x){
    console.log(x);
    getMoreData(x, function(y){
        console.log(y); 
        getSomeMoreData(y, function(z){ 
            console.log(z);
        });
    });
});
```

Here I am requesting some data from the server by calling the getData() function, which receives the data inside the callback function. Inside the callback function, I am requesting for some more data by calling the getMoreData() function passing the previously received data as an argument and so on.

This is what we call callback hell, where each callback is nested inside another callback, and each inner callback is dependent on its parent.

We can rewrite the above snippet using promises. For example:

```
getData()
  .then((x) => {
    console.log(x);
    return getMoreData(x);
  })
  .then((y) => {
    console.log(y);
    return getSomeMoreData(y);
  })
  .then((z) => {
    console.log(z);
   });
```

## What is a Promise?

A Promise is an object that holds the future value of an async operation. For example, if we are requesting some data from a server, the promise promises us to get that data which we can use in future.

## States of a Promise

A Promise in JavaScript just like a promise in real-world has 3 states. It can be pending, resolved , rejected. For example:

![MarineGEO circle logo](https://miro.medium.com/max/1102/1*oOG6l5t9AV41IjFYrwhI1g.png)

- ###### Unresolved or Pending :-
 A Promise is pending if the result is not ready. That is, it’s waiting for something to finish (for example, an async operation).

- ###### Resolved or Fulfilled :-
 A Promise is resolved if the result is available. That is, something finished (for example, an async operation) and all went well.

- ###### Rejected :-
A Promise is rejected if an error happened.
Quick fix to empty page and noscript serving a Vue App
Tags: 10stips, vue, javascript
Published: 2022-07-21 14:58:22

Hey everyone, another `#10stips` today.

> _What is #10stips?_ The column where you solve coding issues within 10 seconds and prevent your mental health.

Basic stuff here, so if you're an advanced javascript/Vue developer, and don't want to laugh out loud, just skip this.

I decided to publish it anyway because the answers on StackOverflow to the same issue wasted my time.

The solution was way easier that I felt like an idiot.

In fact, it was my fault... but it seems it happens a lot since there are many similar requests on the internet.

So, this might be helpful.

## The issue with App.vue

Look at this basic Component:

```vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |

    <!-- same as previous because router-link always look for a name attribute inside the routes object -->
    <router-link :to="{ name: 'About' }">About</router-link>
  </nav>

  <!-- a component from the route will be injected here (eg /about) -->
  <router-view />
</template>
```

We have 3 router-links. The second and third loads the same About view... but **instead of a string I am passing an object with a name attribute.**

This is possible because Vue looks for a name attribute inside each route object. These are the routes:

```javascript
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]
```

If you run the app with `npm run serve` you end up with a blank page (wtf!!).

![Vue blank page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx4ad82thx66q8sepsi1.png)
 
Inspecting the code you see this:

```
<noscript>
   <strong>We're sorry but demo-jobs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
```

## Quick fix with explanation

Did you spot the difference?

In the routes I have
`name: 'about'`

while in router-link I wrote
`{ name: 'About' }`

yes ;) a typo. the string doesn't match. must be lowercase.

But the behavior of Vue interpreter is strange and you don't have clear errors on console. An headache will arise.

Now that I saved your life, leave a thumbs up :) 

See ya next time,
Matt