teleren/devto huggingface dataset:
[Desafio] - Você Mudaria esse Projeto?
Published: 2022-06-23 02:23:47

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1539794978234302467)

---

Ei dev,

Você consegue me dizer se esse projeto vai dar certo do jeito que está desenhado? Se fosse mudar, o que mudaria? A única premissa é que o componente de autorização de compras não pode ser alterado; de resto você tem autonomia pra sugerir qualquer coisa.

cc @sseraphini

![img](https://pbs.twimg.com/media/FV5yH_IWQAUMUEr?format=jpg&name=large)

![img](https://pbs.twimg.com/media/FV5yLOaWIAA1wCJ?format=jpg&name=4096x4096)

![img](https://pbs.twimg.com/media/FV5yO5TWAAApUUB?format=jpg&name=4096x4096)
I Love CSS. What Technology should i learn next?
Tags: beginners, webdev, css
Published: 2022-06-23 02:05:41

So for context, I'm studying for a while now and I feel pretty comfortable with React, Javascript, Html and CSS.

I love styling pages with pure CSS, its almost therapeutic, but as I understand that's not the industry standard and isn't very efficient.

From from the available CSS technologies that are most commonly adopted (SCSS, SASS, Bootstrap, Tailwind, etc) Which one is the most similar to regular CSS that I can learn and would help me in my career?
APIs relacionados con Audio, Poderes secretos web.
Tags: webdev, javascript, beginners
Published: 2022-06-23 01:52:06

Ya nada es secreto, ahora la web puede reproducir el audio de muchas formas.

1. Reproducir archivos de audio en la web, con hospedaje, en forma de un enlace CDN, en local

2. Grabar audio

3. Sintesis de audio

4. Efectos de sonido en base64 (solo para sonidos muy breves)

5. Visualizadores FFT

6. Personajes animados parlantes 

7. Una rocola o mp3 player
The night before.
Tags: webdev, beginners, programming, discuss
Published: 2022-06-23 01:50:40

As I anxiously await my brain surgery in the morning, I find myself going over the last six months journey learning to code. I've always believed that there is no such thing as a 'self-taught' anything. We learned from videos and classes and google searches that were formed by the people that came before us. Those people are our teachers and tonight, those people are on my mind.

The people that reach out and offer help not for clout, but because they genuinely understand that the incoming devs NEED them to succeed. Sure, there is a small bit of self-satisfaction in that action. But it's satisfaction in knowing they are genuinely making the world a better place and are better people through those actions. I love that kind of selfishness. And without it, I wouldn't be as close as I am to finally reaching that golden ring.

I've had the opportunity to meet some incredible people in tech through coffee chats. I've also had people ignore me and literally laugh in my face. So goes the tribulations of socialization. To be clear, we are owed nothing. We are guaranteed nothing. But there are wonderful people out there that will move mountains for us if we just have the guts to ask.

So, looking back, the most important thing I've learned during this time, even above coding, is to speak up. Advocate for your own needs. Put yourself out there because if you don't, you will never stumble into something great.

Blog, even when it's just nervous rambling. Post, even when it's just code snippets that helps 4 people. Ask for help, ESPECIALLY when you feel embarrassed about not knowing. Without those opportunities for connections, we will stagnate and fail.

Thank you for reading and I have much love for you.
I recreated the classic tetris game with react and zustand
Tags: showdev, react, webdev, typescript
Published: 2022-06-23 00:06:47

Hey guys, I want to show my latest project: The classic tetris game. Checkout the [demo](https://kkhanhluu.github.io/react-tetris/)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/pteELGFZlrbLosmbiR/giphy.gif">

## The techstack
- [React](https://reactjs.org/): Javascript library for building user interfaces
- [Zustand](https://github.com/pmndrs/zustand): State management library for react app
- [Web audio api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): This API provides a system to control audio on the web
- [Styled component](https://styled-components.com/)
- [Vite](https://vitejs.dev/): A frontend build tool

## Acknowledgement
- This repository is highly inspired by [Angular tetris](https://github.com/trungk18/angular-tetris) and [this react tetris](https://github.com/chvin/react-tetris/blob/master/README-EN.md). 
- The animation was built with the help of [the useInterval hook from Dan Abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)

## That's it
That's the first time that I work with web audio api and zustand and I had so much fun working with those new stuffs.

You can checkout [my repository](https://github.com/kkhanhluu/react-tetris) to get more information
Hep mi yeni başlangıçlar...
Published: 2022-06-22 21:26:53

Hiç olmamasından iyidir diyerek bir şekilde başlama noktasını bulabiliyor olmak da ilerlemek adına güzel bir başlangıç. Aynıymış gibi görünse de başlangıç noktaları hep bir önceki kendimizin bulunduğu noktadan daha ileri bir konumda olduğu için istersek kendimizdeki gelişimi fark edebilir hale gelebiliriz. Bu satırları da herhangi bir yazı planı olmadan olduğu gibi buraya bırakarak -yazmaya başlamış olma adımını bir önceki gönderide atlamış olup -ikinci gönderi ile sürdürülebilir olma durumunun gerçekleştiğini içerik bu haliyle de olsa görmek istiyorum. Teknik anlamda, her gün yeni öğrendiğim veya öncesinde o bilgiyi öğrenmiş olsam bile yeniden keşfettiğim konuları not tutarcasına düzenli bir şekilde yazmaya başlamak istiyorum ve zamanla düzenli bir hale geldiği durum ile bu zamanki ilk halimi kıyaslayarak faydasını görebilmeyi umuyorum. Yarından itibaren yazılar yazılmaya başlansın o zaman. 😎 **Öğrenmeye ve keşfetmeye devam. 🚀**
Day 75: Behind
Published: 2022-06-22 23:41:20

Hi!
Today was weird time was running so fast and I didn't do much on my daily backlog. I think I'm a bit behind the track so I will need to add more hours tomorrow I think I'm going a hang of the frontend but there are still a lot to learn but we will definitely get there.
Gotta run It's so late :) and I need some of the morning hours tomorrow for catch up

Signing off....
We are ready to help 3-4 startups with testing without monetary compensation
Tags: startup, testing, webdev
Published: 2022-06-22 22:48:00

Hello Everyone!
We provide outsource testing and QA outstaffing services remotely. At the moment we are ready to help 3-4 startups with testing without monetary compensation. For barter or partnership.

That doesn't mean we'll allocate junior testers to your project. We have middle and senior testers on our team, who work with a lot of different projects and have a wide set of skills.

We want to help make the world a better place. You can write office@kavichki.com or this https://kvchk.com/startups/
Dart Spread Operator 💫 🌌 ✨
Tags: dart, flutter, spread, operator
Published: 2022-06-22 22:44:52

Spread(...) ve null-aware spread operatörü (...?) bir koleksiyona birden çok değer eklemek için kısa bir yol sağlar.

Örneğin, bir listenin tüm değerlerini başka bir listeye eklemek için spread operatörünü (...) kullanabilirsiniz:

```
var list = [1, 2, 3];
var list2 = [0, ...list];
assert(list2.length == 4);
```


Spread operatörünün sağındaki ifade null olabilirse, null alana duyarlı bir spread operatörü (...?) kullanarak istisnalardan kaçınabilirsiniz:

```
var list2 = [0, ...?list];
assert(list2.length == 1);
```


Tek tek öğelerden yeni bir koleksiyon oluşturmak istediğinizde koleksiyon değişmezleri mükemmeldir. Ancak, genellikle bu mevcut öğelerden bazıları zaten başka bir koleksiyonda depolanır.

...  map veren bir ifade alır ve bu map'in tüm verilerini yeni map'e ekler.


```
var items = [2, 3, 4];
var set = { 1, 2, ...items };
 
```

çıktı: `{1, 2, 3, 4}`

**Null-aware spread**

```
var oops;
var list = [...oops];
print(list);
```
çıktı: Uncaught Error: TypeError: null: type 'JSNull' is not a subtype of type 'Iterable<dynamic>'



```
var oops;
var list = [...?oops];
print(list);
```

çıktı: `[]`



```
var things = [2, null, 3];
var more = [1, ...things, 4]; // [1, 2, null, 3, 4].
var also = [1, ...?things, 4]; // [1, 2, null, 3, 4].
```


Bir dizideki boş öğeleri atlamak istiyorsanız:

```
var things = [2, null, 3];
var more = [1, ...things.where((thing) => thing != null), 4];
// [1, 2, 3, 4].
```

sabitler

```
const list = [2, 3];
const another = [1, ...list, 4]; // [1, 2, 3, 4].
```

Resources :)
https://github.com/dart-lang/language/blob/master/accepted/2.3/spread-collections/feature-specification.md
https://dart.dev/guides/language/language-tour#spread-operator
🌱 How to ask the right questions?
Tags: discuss, career, productivity, beginners
Published: 2022-06-22 22:26:04

When you are joining a discussion for the purpose of elicitation, be it an interview, a daily work conversation, and so on. To make the discussion as productive as possible:

- How can you decide what questions to ask? 
- How can you find the right people to ask? 
- How can you decide the right moment to ask?
What is the connection between coke and personal development?
Tags: discuss
Published: 2022-06-22 22:24:12

---
title: What is the connection between coke and personal development?
published: true
tags: discuss
---
Today I shopped some soda cans, part of them were cold, the others not. I put them in the fridge, and got one - but I didn't know which ones are really cold - and which were just near to the cold drinks.
And then I realized, you can be contributed by good people with some significant knowledge or soft skills. You can be better by surround yourself with quality people, and learn from them. But for long-term change, it might not work - you have to do internal change - not just environmental one - then you will be really 'cold', and not just temporarily.
Productivity Tips that Work with ADHD
Tags: mentalhealth, productivity, tips
Published: 2022-06-22 22:23:06

Problems you may be facing:
1. Too Distracted To Finish
2. Too Boring to Bother With
3. Ignoring a To-Do List
4. “It’s Me Versus The Clutter”
5. Troubles Beginning a Task
6. “I Schedule a Task, But Ignore It”
7. When Worry Prevents Things From Getting Done
8. Not Being Able to Prioritize a To-Do List
9. Never Meeting Deadlines
10. Project Impossible? Blow it up, break it down

Solutions to your problems:
1. Make the first thing you do each day something relaxing and pleasurable. Do the fun stuff first. 

2. Break down your tasks into tiny sub-tasks. The secret to completing large tasks is to break them into a series of smaller steps aren't as intimidating.

3. Make sure your first tiny task is one that you have a 100% chance of succeeding at

4. Be realistic about the time you need to do something — everything will take ridiculously longer than you think. It's always easier to overestimate how long tasks will take.

5. Post your deadlines where you will see them. This will remind you to use your time wisely.

6. Know that you can’t do everything perfectly. You’re only human, so give yourself some slack.

7. Prep your environment for focus. This will mean something different for everyone.

8. Give yourself a transition time between tasks — especially for mentally challenging projects. Set a timer for 10 minutes and take a walk, do some yoga, or sip your favorite tea.

9. Listen to audios and audio-books on 1.5-2x speed. This will keep you engaged and decrease the time you need to spend on each audiobook.

10. Create momentum. Start with something that will feel easy, find a rhythm, and then dip into the tough stuff.
Code Smell 143 - Data Clumps
Tags: webdev, javascript, beginners, programming
Published: 2022-06-22 22:20:52

*Some objects are always together. Why don't we split them?*

> TL;DR: Make cohesive primitive objects travel together

# Problems

- Bad Cohesion

- Duplicated Code

- Validation Complexity

- Readability

- Maintainability

# Solutions

1. Extract Class

2. Find small objects

# Context

This smell is friends with primitive obsession. 

If two or more primitive objects are glued together, with business logic repeated and rules between them, we need to find the existing concept on the [bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086).

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/076c003ce49b9fc4af66f4dffeb71079)
```csharp
public class DinnerTable
{
    public DinnerTable(Person guest, DateTime from, DateTime to)
    {
        Guest = guest; 
        From = from;
        To = to;
    }
    private Person Guest;
    private DateTime From; 
    private DateTime To;
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/a848e76a45559291a2f71cd76aa91961)
```csharp
public class TimeInterval
{
    public TimeInterval(DateTime from, DateTime tol)
    {
        // We shoud validate From < To
        From = from;
        To = to;
    }
}

public DinnerTable(Person guest, DateTime from, DateTime to)
{    
    Guest = guest;
    Interval = new TimeInterval(from, to);
}
```

# Detection

[X] Semi-Automatic 

Detection based on cohesion patterns is available o a few linters.

# Tags

- Cohesion

# Conclusion

Group behavior in the right place and hid the primitive data.

# Relations

{% post https://dev.to/mcsee/code-smell-122-primitive-obsession-4a55 %}

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

{% post https://dev.to/mcsee/code-smell-27-associative-arrays-2n7j %}

# More Info

- [Refactoring Guru](https://refactoring.guru/es/smells/data-clumps)

- [Wikipedia](https://en.wikipedia.org/wiki/Data_clump)

# Credits

Photo by Dynamic Wang on Unsplash

* * *

> The heart of the software is its ability to solve domain-related problems for its user. All other features, vital though they may be, support this basic purpose.

_Eric Evans_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Gitlab Server Backup Tutorial
Tags: azure, gitlab, devops, backup
Published: 2022-06-22 22:10:02

Audience: Anyone who is actually running their own instance of Gitlab server. This person wants to ensure good backups and restore.

For this article, we'll cover only backups. This article was written with Ubuntu 20.04 with Gitlab version 15.0.0.

This article will tell you how to actually set up the required Gitlab server: https://linuxhint.com/installing_gitlab_ubuntu/

By the end of this, we'll be creating automated backups.

A good reference for this article is here: https://docs.gitlab.com/ee/raketasks/backup_restore.html

First step is to configure Gitlab. 

Ensure backup path exists. Note that you can modify the path to your liking or keep the default. I used /mnt/gitlab/backups because I have an external backup drive mounted at /mnt/gitlab.

```bash
sudo mkdir -p /mnt/gitlab/backups
# Backup dir needs to be owned by user git so it
# can properly write backup files:
sudo chown git /mnt/gitlab/backups
```

Edit the config file in /etc/gitlab/gitlab.rb:

```ruby
# Change the backup path
gitlab_rails['manage_backup_path'] = true
gitlab_rails['backup_path'] = "/mnt/gitlab/backups"
# Limit the number of backups that we keep
gitlab_rails['backup_keep_time'] = 604800
```

When done, save then reread the Gitlab configuration file:

```bash
 sudo gitlab-ctl reconfigure
```

Next let's run out backup commands:

```bash
/usr/bin/gitlab-backup create force=yes GZIP_RSYNCABLE=yes STRATEGY=copy CRON=1
```

* force=yes will run without asking questions which is perfect for a script
* GZIP_RSYNCABLE=yes To ensure the generated archive is transferable by rsync, you can set the GZIP_RSYNCABLE=yes option. This sets the --rsyncable option to gzip.
* STRATEGY=copy The strategy copies data files to a temporary location before calling tar and gzip, avoiding potential errors if data changes while tar is reading it.
* CRON=1 hides all progress output if there aren’t any errors

Next, we need to backup our secrets to the same location

```bash
cp /etc/gitlab/gitlab-secrets.json /etc/gitlab/gitlab.rb /mnt/gitlab/backups
```

Now your Gitlab server is backed up, and it's possible to restore it.
Speech-to-text with Deepgram
Tags: node, speechtotext, javascript
Published: 2022-06-22 22:00:16

Bekah Hawrot Weigel (@bekahhw) joined me on [my stream](https://livecoding.ca) today to show how you can transcribe text using Deepgram's [Node.js SDK](https://developers.deepgram.com/sdks-tools/sdks/node-sdk/).

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

We went through the demo code all the way to building out an app with Express that allows you to submit a URL for transcription.

Here's the code for what we built out

{%embed https://github.com/nickytonline/deepgram-speech-to-text-stream %}

Check out their docs if you want to learn more about what Deepgram can do!

* [Pre-recorded audio](https://developers.deepgram.com/documentation/getting-started/prerecorded/)
* [Live Streaming audio](https://developers.deepgram.com/documentation/getting-started/streaming/)
* Check out [all the features](https://developers.deepgram.com/documentation/features/)

Also, be sure to check out Bekah's latest post!

{%embed https://dev.to/deepgram/how-to-add-speech-recognition-to-your-react-and-nodejs-project-4404 %}

Thanks for hanging Bekah!
Day 578 : Season
Tags: hiphop, coding, code, lifelongdev
Published: 2022-06-22 21:55:11

_liner notes_:
- Professional : Didn't get as much as I wanted to get done with the video tutorials, but I did record the audio for another one. Sat in on a talk prep session super early this morning. I drove an hour to the office. Set up to work. ad a meeting with my manager. Found a couple of things to update in a tutorial. Answered a question on StackOverflow. Helped out with some community questions. Next thing I know, it's the end of the day.

- Personal : I don't even really remember what I did last night. haha I should really start using the https://WhatYouDo.in site I made. I think I did some research on my new side project. Oh, I got my stronger antenna for the Helium miner and attached it to the one in the office. Hoping I get more and larger transactions with it. Going to keep an eye on it.

![Looking up a snow covered mountain range in Salcantay, Peru with a house in a grass covered valley](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yktskjr01xbbr9tgcr9i.jpg)

Going to stay a little later at the office to finish up some more stuff. I'll probably be too tired to do any coding by the time I get back to the spot. Thinking I'll catch up with "Ms. Marvel" and watch the new season "Umbrella Academy".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube EcNPUIjNMPc %}
How arrays and objects are copied in JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2022-06-22 21:54:00

---
canonical_url: https://blog.aamchora.space/how-arrays-and-objects-are-copied-in-javascript
---

First, we need to thoroughly understand two concepts.

1. Pass by value.
2. Pass by reference.

**Pass by value**

It simply means, While calling a function. You are passing values directly inside a function as an argument.

EG:

```js
// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

// function calling
greet("Hemendra");// <- we're passing value as an argument

// prints --> hello Hemendra!

```

**Pass by reference**

It simply means, While calling a function, You will pass a reference of a constant or a variable instead of a value directly inside a function as an argument.

EG:

```js
// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

const name = "Hemendra";

// function calling
greet(name); // <-- we're passing a reference of a constant called name  

// prints --> hello Hemendra!

```

Pretty simple right? 

Yes, it's that simple!

But, there is more to understand here. Let's understand this by an example.

EG:1

```js
// You might have written something like this before

let score = 10;
let temp = score;
temp = temp + 2;

console.log(`score is ${score}`); // prints-> score is 10
console.log(`temp is ${temp}`); // prints-> temp is 12

```
EG: 2

```js
// You might have done something like this as well

let todos = ["T1", "T2"];
let tempTodos = todos;
tempTodos.push("T3");

console.log(`old todos are ${todos}`); 
// prints-> old todos are T1, T2, T3
console.log(`temp todos are ${tempTodos}`); 
// prints-> temp todos are T1, T2, T3
```

Wait whatttttt?? 

![confusion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlkq4xxwcwjf9c3k370y.gif)

Yes, I was also like this when I was a beginner. Let's understand what just happened in the above example.

**Remember this**

- While working with primitive data type in JavaScript we copy its value.

`EG: string, number, boolean, symbol, undefined, null`.

- While working with non-primitive data type in JavaScript we copy its reference.

`EG: arrays, objects, functions`


**Explanation**

In the first example, we used the primitive data type that is why the score and temp variable's value was different.

But, In the second example, we used an array that was a non-primitive data type, and while copying the variable, **we  have reference of it instead of its value**. Hence both the variables `todos` and `tempTodos` **were pointing to the same value in the memory.**

Thus, while changing the tempTodos variable, todos variable was also changing.


**Tip:** 

We often encounter an array of objects while building any application.
We create multiple functions to modify the array of objects.

But do remember this concept,

**How array or objects are copied in JavaScript**, 
 

Else you will end up facing a lot of bugs in your app.



---



**_follow me for more such blog posts._**
_Let me know if this blog was helpful._
My tools for front end development
Tags: webdev, javascript, programming, css
Published: 2022-06-22 16:47:00


Website to create wireframes - https://balsamiq.com/wireframes/?gclid=Cj0KCQjw2MWVBhCQARIsAIjbwoM7ELvU2Yb02JFDIY7PxMNuhqlKrAwtLRTreUSRcHlKsIG8Kh8DizQaAkhmEALw_wcB,
https://sneakpeekit.com/

Website ideas https://www.awwwards.com/ , https://dribbble.com/tags/website

Help for UI-patterns  = https://ui-patterns.com/patterns


for image use website
https://www.pexels.com/  ,  https://unsplash.com/

make buttons 
https://css3buttongenerator.com/

make fabicon https://www.flaticon.com/

Add Icons - https://fontawesome.com/icons , https://icons.getbootstrap.com/#install


# Bootstrap:-
Grid - https://mdbootstrap.com/docs/standard/layout/grid/


**Tools & Resources to Improve Your UI/UX Skills**

1. http://learnui.design
2. http://uxfol.io
3. http://lawsofux.com
4. http://visily.ai
5. http://enhanceui.com
6. http://figma.com
7. http://sketch.com

YT
8. Design Course
9. Flux
10. UX Mastery
Architecture Decision Record - all you want to know about ADR
Tags: architecture, development, documentation, programming
Published: 2022-06-22 21:52:08

---
title: Architecture Decision Record - all you want to know about ADR
published: true
description: 
tags: architecture, development, documentation, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1plt3pj7k0kpyckp5ake.png
# Use a ratio of 100:42 for best results.
---


Developing a system over years is hard, as is writing clean, maintainable, up-to-date code. But believe me, writing easy-to-maintain AND up-to-date documentation is not trivial either. 

That's why I invite you to take a look at **the Complete Guide about ADR** and how do we implement it in the D&D Beyond eCommerce team, which covers: 

1. Engineering teams' problems
2. What is ADR?
3. What are the benefits of ADR?
4. How to make ADR effective?
5. When should ADR be written?
6. Where should ADR be stored?
7. ADR template
8. References in ADR
9. Real life examples, public repos with ADRs


### [How to keep programmers’ decisions documentation up-to-date and simple with Architecture Decision Records](https://medium.com/fandom-engineering/keep-programmers-decisions-documentation-up-to-date-and-simple-with-architecture-decision-records-8ef5f1761ba)