teleren/devto huggingface dataset:
Idea was ripped apart!
Published: 2023-07-22 02:21:23

We discussed the idea of giving both users and restaurants profiles like Yelp. We decided to let go of the "rate the server" idea due to concerns about moderating comments and ratings. Instead, we considered turning the app into a food-social media platform.

Tong proposed adding a section called "Today's Event Near Me" to the app, where restaurants could post their events and push notifications could be sent to users. The goal was to provide more exposure to local restaurants and encourage user interaction with them.

Finally we discussed the idea and decided to rewrite the project proposal for the social app with added features.
Given two non-negative integers, num1 and num2 represented as string, return the sum of num1 and num2 as a string.
Tags: javascript, programming, beginners, interview
Published: 2023-07-22 01:35:12

## This problem was asked by Facebook.

## Given two non-negative integers, num1 and num2 represented as string, return the sum of num1 and num2 as a string.

```
Example
function addStrings(num1, num2) {
    
};

console.log(addStrings('111', '2222')) // "111" + "2222" = "2333"
```
**Notes: You cannot use any built-in BigInteger library**

- num1 and num2 consist of only digits.
- num1 and num2 don't have any leading zeros except for the zero itself.


**Solution**

```

function addStrings(num1, num2) {
  let i = num1.length - 1,
    j = num2.length - 1;
  let result = "";
  let carry = 0;
  while (i >= 0 || j >= 0 || carry > 0) {
    const n1 = num1[i] ? parseInt(num1[i]) : 0;
    const n2 = num2[j] ? parseInt(num2[j]) : 0;
    const sum = n1 + n2 + carry;
    carry = Math.floor(sum / 10);
    result = (sum % 10) + result;
    i--;
    j--;
  }

  return result;
}

console.log(addStrings("111", "2222"));

```

**Explanation**

- Initialize pointers i and j to the end of the input strings
- Initialize carry to 0
- Loop through and calculate the sum of digits at i and j indices, plus carry
- Update carry and append digit to result
- Decrement i and j
- Return result string


**This iterates through the strings digit-by-digit while tracking the carry, building up the result string in reverse order**
So Many Passwords
Published: 2023-07-22 01:28:37

I am objectively looking at my password useage and it has been garbage up until today. I decided to use RoboForm but I feel weary using a free password manager. Does anyone have recommendations for multi-service password managers that aren't outrageously expensive? I would feel a lot better knowing I am paying for a service to keep all the stuff safe rather than just trusting this free extension won't mess with my security.
For Loop, Use & Syntax
Tags: javascript, learning, coding
Published: 2023-07-22 01:19:03

Sometimes we find that we have to write the same code many times. For example, having to print the numbers from 1 to 100 on the console would be very tedious nor would it be very efficient.


![example of writing console.log() 100 times](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is643h9j8bllvn9l32iz.png)
**Here is when loops become handy:**

Loops allow us to execute the same code a certain number of times. We can use a "**for**" loop instead of writing a console.log() 100 times.

**For loop syntax:**

The syntax consists of the keyword "**for**" followed by parentheses and curly braces (**for(){}**)

Inside the braces we have the **loop-body** which is the code to be executed. Inside the parentheses we have the number of times our code is going to be executed. This is made up of several parameters separated by semicolons "**;**".

![For loop syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfmv5hgc09ism8f0eyc2.png)

**Initialization:** This will be our starting point, here we can define a variable that will be used as our counter. **Conts** should not be used since its value will be changing, typically the initial value is 0 or 1.

**Condition:** Here we write the ending point. We must define how many times we want our code to be executed. This means that our loop will be executed while the condition is true. 
_It is important to have an ending point if we do not want our loop run an infinite number of times._

**Iteration:** The iteration is what is executed at the end of each loop. Here we will define what we want to happen with our variable. For example, increase or decrease its value.

**Loop Body:** This will be the code to execute for each time while the condition is true.

![for loop example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jevbomcp75jvxpuaq3g.png)

In this example we define our variable "**i**" equal to **1** since we want to print the numbers from 1 to 100. This would be our counter.

The condition would be that as long as the value of our variable "**i**" is less than or equal to 100, our loop will continue to execute.

For the iteration, each time our code is executed, one will be added to "**i**". In JS, we can do this using '**++**'.

For the body, we are using "**i**" inside the parentheses to print its value after each cycle.

As we can see using the "**for**" loop, we can get the same result without having to write 100 separate "console.log()". Loops are powerful tools that help us simplify and improve our code.
2023-07-21: Webhooks
Tags: devjournal
Published: 2023-07-21 23:16:52

I think I'm just going to hold off talking about the game project till I actually had a chance to do literally anything, since I've been busy with a bunch of stuff.

So I'll just jump straight into what I've been doing for work.

Most of what I've been doing is messing around with various no-code sites that are designed to handle automation of data entry, and we used four different approaches to do that. I'll go in order of what we did.

The first two were with Zapier. I worked with M to create the first Zap in which we took our Typeform data and fed it into a Google Sheet and a Slack message and an email. That worked fine as of last Friday.

The second one, my boss wanted me to work on it alone. This time, I was to make the same Zap but using webhooks to send to Discord and Slack. That was definitely a lot more of a pain, since for whatever reason, parsing out the data from the Typeform JSON came out extremely weird through Zapier's interface:


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

Even though it looks perfectly normal in the actual JSON that I get:


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


I'm not sure what's up with that.

Anyway, that worked fine after I added a Python code block to parse out the data to remove those commas and whatever. After that, it just sends a POST to both Discord and Slack with the same exact data. Simple enough.


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

Next up, for the third one, I had to make the data go to a Notion CRM table. This one was definitely much simpler, but at the cost of not being customizable at all. I couldn't even carry over the submission date/time because it just wasn't an option. I personally don't think it's a good method of storing data at all, but my boss is saying it's meant for our internal testing for the folks who are not as technically inclined or something like that. I do like that Notion has AI-generated columns though.

Finally, the task was to create a similar thing with Pipedream, which is more oriented toward developers, and as such, it is probably the most complex yet customizable one of the bunch. However, I noticed the UI is extremely glitchy. There is some possibility for using YAMLs to make it even more programmatic, just like with GitHub Actions and Kubernetes.

Overall, I think Zapier is the best in terms of trade-off between customizability and simplicity. Zapier can be dead simple, or we can make it sufficiently customized with Python insertion. I don't think we necessarily need that much control at this stage. Maybe later on we'll need an even more robust CI/CD pipeline, but for now: Zapier.

Anyway, till next week, cheers!
Resolving viewport duplication in Next.js 13.4
Tags: nextjs, react, typescript
Published: 2023-07-22 00:56:06

---
title: Resolving viewport duplication in Next.js 13.4
published: true
description: An effective solution to the issue of duplicating the viewport tag in Next.js 13 when defining the viewport directly in components.
tags: nextjs, react, next, typescript
---

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

1. [Introduction](#introduction)
2. [The Problem](#the-problem)
3. [The Solution](#the-solution)
4. [Conclusion](#conclusion)

---

## Introduction

When working with Next.js, it's common to encounter some technical issues along the way. One such problem that may arise is the duplication of the viewport tag. This article aims to address this issue specifically, providing a solution to resolve the viewport duplication problem in components in Next.js 13.

---

## The Problem

Before we present the solution, it's crucial to first understand the problem at hand. When using the viewport tag directly in the code, as shown below:

```javascript
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
```

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

---

## The Solution

To solve this problem, we need to change the way we are defining the viewport. Instead of placing it directly in the code, we should specify it in the metadata.

The solution was discovered and documented in a [StackOverflow thread](https://stackoverflow.com/questions/76740487/override-meta-tags-in-nextjs-13-4/76740673#76740673).

```Javascript
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1', // <-- now here
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
```

![success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pgyvwij5sh6khz1ujvd.png)

---

## Conclusion

In the world of software development, we often come across technical challenges. These challenges may seem daunting at first glance, but with the power of the development community and the constant exchange of knowledge, the solution is often just a post away.
The 41st Day of the 100 Days of Code Challenge
Published: 2023-07-22 00:48:17

Hey everyone!

Today was another fun vacation day in my hometown, Paris!

I spent some time debugging my code some more to fix the concurrency issue and as I said yesterday, I learned that the problem was attempting to add new items to the audio stream during the transcription process which is impossible to do (impossible with RxPy's Subject).

So, the line that adds the audio chunk would become blocking and didn't finish executing until the transcription for the current buffer was done, effectively stopping the main thread's execution which is responsible for handling the server's requests and handling the new chunks. Right now, the socket ends up disconnecting every time because of what I believe to be the load on it after it suddenly handles the requests.

I created a new thread just for receiving the chunks so that it wouldn't block the main thread, but then it still blocked it.

After a conversation with ChatGPT, I learned that this function is probably holding the GIL and won't let other threads execute. I tested other threads doing simple operations as well and they stopped running. To bypass this limitation, I had to use multiprocessing, which creates an entirely new process.

I could also modify the way the stream is working somehow, but I prefer not to do it as this design for the stream and transcription process is working quite perfectly and I'd like to preserve it. However, I had a small problem with using multiprocess that I can't seem to figure out. It only occurs in a specific case and doesn't occur in the main file. Planning to debug it more tomorrow and that'll be it for this project as far as functionality goes. It will clearly work.

That's it for today,
Happy coding everyone!
Resolvendo a duplicidade do viewport no Next.js 13.4
Tags: nextjs, react, typescript
Published: 2023-07-22 00:22:46

---
title: Resolvendo a duplicidade do viewport no Next.js 13.4
published: true
description: Uma solução eficaz para o problema de duplicação da tag viewport no Next.js 13, ao definir a viewport diretamente em componentes.
tags: nextjs, react, next, typescript
---

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

1. [Introdução](#introdução)
2. [O Problema](#o-problema)
3. [A Solução](#a-solução)
4. [Conclusão](#conclusão)

---

## Introdução

Quando trabalhamos com o Next.js, é comum encontrar alguns problemas técnicos ao longo do caminho. Um desses problemas que pode surgir é a duplicidade da tag viewport. Este artigo tem como objetivo abordar especificamente essa questão, fornecendo uma solução para resolver o problema da duplicidade do viewport em components no Next.js 13.

---

## O Problema

Antes de apresentarmos a solução, é crucial entender primeiro o problema em mãos. Ao utilizar a tag do viewport diretamente no código, como mostrado abaixo:

```javascript
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
```

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

---

## A Solução

Para resolver este problema, precisamos mudar a forma como estamos definindo a viewport. Em vez de colocá-la diretamente no código, devemos especificá-la no metadata.

A solução foi descoberta e documentada em um [tópico no StackOverflow](https://stackoverflow.com/questions/76740487/override-meta-tags-in-nextjs-13-4/76740673#76740673).

```Javascript
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1', // <-- now here
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
```

![success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pgyvwij5sh6khz1ujvd.png)

---

## Conclusão

No mundo do desenvolvimento de software, muitas vezes nos deparamos com desafios técnicos. Esses desafios podem parecer intimidantes à primeira vista, mas com o poder da comunidade de desenvolvimento e a troca constante de conhecimentos, a solução está frequentemente a apenas um post de distância.
Hello World!
Tags: firstpost
Published: 2023-07-21 23:49:04

2023年，欢迎来到我的技术博客！之前攒了许多有关软件、硬件技术想写的内容，又总是不想“污染”自己的博客，导致憋了一路无处释放。

接下来的一段时间，我会重制几篇过去的博文来给这里暖暖场。在可预见的几年里，这个博客主要写如下的内容：

- 苹果技术 Apple Technologies: Swift, SwiftUI, UIKit iOS/macOS development, Xcode
- 地图技术 Mapping: ArcGIS, Esri, ArcGIS Maps SDK for Swift, ArcGIS Runtime
- Python: scripting, multiprocessing, image processing, PIL, ArcPy
- 开源 Open Source Society
- 编程随想：关于我如何“唱唱反调”误入歧途，却痛并快乐着的短暂编程生涯

希望未来的自己笔耕不辍，能够让这个新的平台慢慢经营起来。也希望dev.to能保持初心，长久稳定地作为一个优秀的开发者交流平台存在下去。千万不要变成medium或者简书那样，“恰烂钱”逐渐变成了垃圾堆！而像GitHub、Stack Overflow、Swift Forums等等平台，逐渐成为开发者生活中不可或缺、设计优秀、节制扩张的优秀产品。

🌏你好，世界！👋
ReactJS Coding and TechTalking, come join :D
Tags: react, javascript, typescript, frontend
Published: 2023-07-21 23:42:54

Programming a real company app with reactjs, using microfroentds and typescript C#, javascript, html, css, net core, kubernetes.

Worked for more than 6 tech companies, including AbInbev, Banco Safra e Dell Computers. For now i own a fintech and i am also building a new startup.

[Youtube Live](https://www.youtube.com/watch?v=gQKmhyjE19o)
Adding skip to main content link to my personal website
Tags: web, a11y, css
Published: 2023-07-21 23:17:18

Recently I picked up a Logitech K380 keyboard to be used along with my Macbook Air. And I tried to naviate web pages with keyboard only, and I have to say the experience is so much better for websites that support "Skip to main content" link.

So I feel the urge to add one to my personal site since I'm beginning to dive more into web accessibility stuff.

## HTML
It's obviously that we need to add this link at the beginning of our web page so it is one of the first items accessed by keyboard and screen reader users.

```html
<body>
    <a href="#maincontent">Skip to main content</a>
    <header></header>
    <main id="main-content"></main>
    <footer></footer>
</body>
```

Along with smooth scroll bebavior to enhance the experience for sighted people.

```css
html {
    scroll-behavior: smooth;
}
```

Next step is to make this link visually hidden until the user navigates to it with a keyboard.

According to [Skip Navigation Links](https://webaim.org/techniques/skipnav/) on WebAIM, to be usable by all keyboard users, particularly sighted keyboard users, the link must:

- be hidden by default
- be accessible to keyboard navigation
- become prominently visible when it is focused
- properly set focus to the main content area when activated

There are quite a few CSS techniques to visually hide content, [techniques for hiding content](https://webaim.org/techniques/css/invisiblecontent/) is an great article you don't want to skip :)

## CSS

We can take advantages of default browser styles when this link is focused by keyboard, by changing the `outline-color` along with a `outline-offset`.

```css
.skip-to-content {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: -1;
    padding-inline: 1.75ch;
    padding-block: .75ch;
    border-radius: .5ch;
    background: var(--accent-color);
    color: white;
    font-weight: bold;
    opacity: 0;
}

.skip-to-content:focus-visible {
    outline-color: var(--accent-color, #7044e8);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    opacity: 1;
    z-index: 999;
}
```

You can try it out live on my website site [https://heybran.cn](https://heybran.cn) by navigating using keyboard.
Have Engineering Leaders Become Too Hands-off?
Tags: devops, productivity, management, podcast
Published: 2023-07-21 22:22:22

On this week’s episode of Dev Interrupted, co-host Conor Bronsdon welcomes Francisco Trindade, Director of Engineering at Braze, to discuss strategies to improve collaboration and effectiveness within engineering teams. 

Francisco notes a shift in the tech industry over the past decade from focusing on rapid hiring and individual growth to a need for more effective team dynamics. Criticizing the tech industry's aversion to micromanagement, he argues that it has inadvertently resulted in a lack of focus on team effectiveness and proposes a renewed emphasis on fostering productive environments for engineers to fully realize their potential.

{% spotify spotify:episode:1X473WaiU7a2uPi9NXkq0o %}

## Episode Highlights:
* (2:20) Managers can't be micromanagers
* (4:40) Francisco's three key aspects to improving team effectiveness
* (11:15) Creating the right incentives for your team
* (14:00) How to work with teams around the world
* (21:15) Increasing engineering team efficiency
* (27:30) What is Braze?

[Read the full episode transcript
](https://devinterrupted.com/podcast/have-engineering-leaders-become-too-hands-off/)

---

***While you’re here, check out this video from our [YouTube channel](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1), and be sure to like and [subscribe](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1) when you do!***

{% youtube bqNibLyIAOE %}

---

### Want to cut code-review time by up to 40%? Add estimated review time to pull requests automatically!
*gitStream is the free dev tool from LinearB that eliminates the No. 1 bottleneck in your team’s workflow: pull requests and code reviews. After reviewing the work of 2,000 dev teams, LinearB’s engineers and data scientists found that pickup times and code review were lasting 4 to 5 days longer than they should be.* 

*The good news is that they found these delays could be eliminated largely by adding estimated review time to pull requests!*

### Learn more about how gitStream is making coding better [HERE](https://linearb.io/blog/why-estimated-review-time-improves-pull-requests-and-reduces-cycle-time/?utm_source=Substack%2FMedium%2FDev.to&utm_medium=referral&utm_campaign=gitStream%20-%20Referral%20-%20Distribution%20Footers).

![Start using gitstream today!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg1l6hxt134px501bf7d.png)
My first day writing code
Published: 2023-07-21 22:10:52

I’m quite excited today!

I started working through the freecodecamp HTML course, it felt good to start learning how to write code, it felt like second nature reading through the instructions on each challenge!

What I learned today is:
- How to add images to a web page
- How to write ordered and unordered lists using the `ol`, `ul` and `li` tags
- How to add links using the anchor tag `a` and the `href` attribute
- How to add checkboxes and radio buttons using the `input` tag 

I was particularly impressed with learning how to add elements in the `head` tag in order to tell the website how to behave!

I’m looking forward to continuing tomorrow 😊
Day 788 : Ain't No Half Steppin'
Tags: hiphop, code, coding, lifelongdev
Published: 2023-07-21 21:19:27

_liner notes_:
- Professional : Attended a talk prep session to catch a demo of an application a coworker made. It's pretty cool. Then I thought I would work on the documentation for a sample project I created but got caught up speaking with a team working on an SDK and discussing the documentation I've been looking at to get a better understanding of it and putting my feedback. Next thing I know, it's time to call it a day. It's Friday and it's a half day.

- Personal : So I forgot yesterday was Thursday so I went through and bought tracks on Bandcamp. I then prepped my posts to Twitter, Bluesky and Threads. That way, I can just copy and paste the posts the next day. Did a little work on my side project and went to sleep.

![A brown bear with a cub on its back in a field of tall grass in Alaska](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32caeao79afx757rt9aq.jpg)

Just cause it's a half day, ain't no half steppin'. haha So with my extra time, I worked on the radio show. I put together the playlist and copied over the tracks to my audio player. After dinner, I'm going to finalize the playlist and get the social media posts together. After that, I want to try and finish up the edit session form for my side project and maybe get the update function working. We'll see. There's always my Sunday study sessions (https://untilit.works) where I set time aside to work on my project.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube wTCGw0wizRo %}