teleren/devto huggingface dataset:
Scroll Persistence May Not Work as Expected
Tags: webdev, todayilearned
Published: 2023-01-12 23:11:34

The other day I stumbled upon a peculiar problem with scroll persistence in a seemingly straightforward layout. Usually, browsers prevent layout shifts if changes are happening off-screen, and yet that wasn’t the case.

## The Layout

The layout in question can be distilled into the following:

{% codepen https://codepen.io/fenok/pen/ZEjKPbe %}

On the left, there is a component with a static header and a sticky button. Sticky elements can only stick within a container, so this component is stretched all the way down. On the right, there is long content with a dynamically updated element on top. This dynamic element changes its height unpredictably. The layout itself is a pretty straightforward grid.

## The Problem

The problem is that if we scroll the page to the bottom, the content will still jump on every height change, even though browsers are usually smart enough to adjust the scroll position so that the perceived scroll position remains intact.

As a short investigation showed, the issue is that the left and right columns compete for these scroll adjustments, and browsers prioritize the elements according to their position in the DOM. The left column comes first, and therefore browsers adjust the scroll position so that we see the same part of the sticky element container. This is not practical, as we will see the sticky element regardless, and we actually want to lock the content on the right.

## Moving Elements in the DOM

It can be fixed by moving the right column before the left column in the DOM and then reordering them back in place via CSS. However, this approach will break some accessibility features, most notably the button tab indices. This can be seen in the following example:

{% codepen https://codepen.io/fenok/pen/YzjVMzP %}

If we try to tab-navigate between buttons, the right button will come first, which is undesirable.

## Removing the Competition

After some time, I realized that it was possible to remove the competition altogether. We can move the sticky element to the top and use the grid cell as its container.

{% codepen https://codepen.io/fenok/pen/gOjWyPw %}

This approach is a bit more complex than the initial one, but now we only have the right column and the scroll persistence works flawlessly without sacrificing accessibility.

## Conclusion

Browsers are capable of preventing layout shifts on dynamic content updates. However, sometimes multiple elements compete against each other for being able to stay in place, which may lead to confusing behavior.

The ideal solution is to simply remove the competition. If that’s impossible, we can move the element that we need to lock in place so that it comes before the other elements in the DOM.
LeetCode #9 Palindrome Number with JavaScript
Tags: javascript, algorithms, leetcode
Published: 2023-01-12 23:07:35

Solutions to LeetCode's [9. Palindrome Number] (https://leetcode.com/problems/palindrome-number) with JavaScript.

Solution 3 addresses the following follow-up.
**Follow up: Could you solve it without converting the integer to a string?**

## Solution 1: Converting the int to a string
``` js
/**
 * @param {number} x
 * @return {boolean}
 */
const isPalindrome = (x) => {
  const stringX = String(x);
  let reversed = "";
  for (let i = stringX.length - 1; i >= 0; i--) {
    reversed += stringX[i];
  }
  return reversed === stringX;
};
```

- Time complexity: O(n)
- Space complexity: O(n)

## Solution 2: Converting the int to a string (Recursion)
``` js
/**
 * @param {number} x
 * @return {boolean}
 */
const isPalindrome = (x) => {
  const stringX = String(x)
  if (stringX.length === 0 || stringX.length === 1) return true;
  if (stringX[0] === stringX[stringX.length - 1]) {
    return isPalindrome(stringX.slice(1, stringX.length - 1));
  } else {
    return false;
  }
};
```

- Time complexity: O(n)
- Space complexity: O(n)


## Solution 3: Without converting the int to a string
``` js
/**
 * @param {number} x
 * @return {boolean}
 */
const isPalindrome = (x) => {
  if (x < 0) return false;
  let number = x;
  let reversed = 0;
  while (number > 0) {
    reversed = (reversed * 10) + (number % 10);
    number = parseInt(number / 10);
  }
  return x === reversed;
};
```

- Time complexity: O(log10(n))
- Space complexity: O(1)

Reverse one letter at a time, using the remainder divided by 10, leaving the number as it is.
Startup Growth & Metrics: What to Measure & When
Tags: startup, podcast, productivity, devops
Published: 2023-01-12 23:04:27

As your startup scales it's not enough to know what to measure - you have to know WHEN to measure. Metrics that are important in one growth phase might not be in the next.

To help us make sense of it all, we invited Laura Tacho onto the show. Laura is a VP of Engineering & Leadership Coach, and an expert when it comes to startup growth and metrics, having worked with over 125 different companies.

We love this episode because it takes a team-first approach to metrics and then relates those metrics back to the growth of your organization. Whether you are a seasoned engineering leader or an IC trying to understand where your team is headed, this unique take on metrics will set your team up for success - and happiness - in 2023.

{% spotify spotify:episode:0Xgg17fhRghgK2GiHPZsnn %}

## Episode Highlights:
* (2:53) How Laura got her start in engineering
* (6:56) Why companies grow and mature like people
* (11:58) How bad habits get baked into companies
* (17:35) Common growing pains during scaling
* (19:54) Advice for eng teams at scale-ups
* (23:29) CEOs who get attached to bad metrics
* (31:21) Metrics for mature orgs
* (36:48) Justifying metrics to your board and your team

***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 4CAifupKdG4 %}

### 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)
Not knowing things
Tags: webdev, watercooler
Published: 2023-01-12 23:00:00

[Chris Coyier](https://chriscoyier.net/2023/01/12/the-great-divide-was-indeed-divisive/) updates his stance on his [Great Divide](https://css-tricks.com/the-great-divide/) theory:

> "Since there is too much for any web developer to know, what is the most graceful and professionally acceptable way of not knowing things?"
> 

I think the answer is *honesty.*

It's okay to say that you don't know stuff. My workplace pits me against the Great Unknown all the time: a huge complex monster of a core product. Internal tooling inherited from another team. Custom hacked docs generation, all undocumented. *Legacy Code*. Almost all of it is written in TypeScript, which I don't even consider my strongest language. 

While I can always look up syntax I don't know online, I can't do the same for our own concepts. That's when I ask for help. I admit that I don't know all the things. And that's okay. 

[SpeedKit](https://www.speedkit.com/) is the largest and most complicated project I’ve ever worked on. It took me half a year of onboarding (and struggling with Impostor Syndrome) to become somewhat productive and stop feeling like a chain on my coworkers legs. To implement features on my own. And that's when my coworkers started asking me question about my features. Turns out they don't know everything all at once either. And we are just on the JavaScript-side of the divide. Imagine if we started to write CSS on the job!

It's okay to ask questions. It's normal to not know all the things. If I can be honest about the things I don’t know, so can others. And if everyone does, it creates a office culture of helping each other out - gracefully and professionally.
Front End Development
Tags: webdev, beginners, javascript, css
Published: 2023-01-12 22:58:04

Everything you find on a website is designed by a front-end developer like buttons, links, animations etc. It is the job of the font-end developer to use the client's designs and ideas and implement them through codes. 

To become a front-end developer you would need a few languages such as:

- HTML

- CSS

- JavaScript

## HTML
HTML stands for `HyperText Markup Language`. It is used to create the skeletal structure of a website. The HTML template looks like this:

```
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    
</body>
</html>
```

## CSS
To style a website, you would need CSS which stands for `Cascading Style Sheet`. Different properties can be styled using the following syntax:

```
selector { property : value ; }
```
Link to CSS tutorial:
[https://www.w3schools.com/css/default.asp]()

### JavaScript
JavaScript allows the user to interact with the website like when a user wants to submit a form, and an alert pops up with a message "Submitted". JavaScript offers that functionality.
An example:

```
<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

```
To learn a full course on front-end development: Visit [https://www.w3schools.com/]()
Day 672 : Caught Up
Tags: hiphop, code, coding, lifelongdev
Published: 2023-01-12 22:28:01

_liner notes_:
- Professional : Thursdays are my meeting days. Got up super early to attend the meetings so I don't have to watch recordings. Took a nap after and then worked on a new Web Component proof of concept. Got quite a bit done. Might be able to finish it up tomorrow.

- Personal : Went through some tracks for the radio show. Also got the front end of my website to load a Stripe Checkout page that's on another project. It's proof that things should work the way I want, so that's good. Also watched the new "Vinland Saga". I watched the last episode from Season 1 to get caught up.

![White sands of a beach in Waimanalo Beach, Hawaii looking into the ocean with the waves coming onto shore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtb5wubiy3ln78tg72sg.jpg)

Going to go through tracks for the radio show and start putting it together. If I have time, I want to work on my side project. Going to see if there are any new anime episodes I haven't seen yet.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube aC-GHV1CeyQ %}
✨ Day 1 of the #100DaysofCode challenge ✨
Tags: webdev, 100daysofcode, javascript, beginners
Published: 2023-01-12 21:53:54

**Day 1 of the #100DaysofCode challenge**

I'm going to start this challenge super excited! My goal in this #100DaysofCode is to be able to study the MERN technology stack.

I'm going to be honest, I have some experience with JavaScript and React, but almost nothing, this led me to decide today (12-01-2022) to start this challenge, I'm going to go through **HTML, CSS, JavaScript, Git, NodeJS, ReactJS, NextJS, ExpressJS, MongoDB** and more.


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

Today I'm going to start learning HTML probably, at the end of the day I'll go through the comments to say how it went.

It will be quite difficult, but I trust myself and my judgement. It's not going to be a simple walk in the park, I plan to spend about 3-4 hours a day.

My goal is not to get out of the challenge being a junior or a senior, but to be able to build scalable software on my own and be able to improve myself, since I am not going through one of my best stages with programming.

I hope I can have fun and enjoy this!!!
Number::Phone release candidate
Tags: perl, telecoms, testing
Published: 2023-01-12 21:52:39

I've recently tackled a feature request that's been sitting in the backlog for several years, to use libphonenumber's data to validate numbers with non-geographic country codes. That's codes like +800 (international freephone), +870 (Inmarsat) and so on.

Previous versions would sort of work with these numbers, in that they could be instantiated as objects, but there was no information on validity or any other properties.

For example here it's looking at an Iridium number. First with the previous release:

`Number::Phone->new("+881 672520333333333333333732")->format()`

> +8816 72520333333333333333732

`Number::Phone->new("+881 672520732")->is_mobile()`

> undef (ie, dunno)

and with the release candidate:

`Number::Phone->new("+881 672520333333333333333732")`

> undef (ie, not valid)

`Number::Phone->new("+881 672520732")->format()`

> +881 6 725 20732

`Number::Phone->new("+881 672520732")->is_mobile()`

> 1

Much of the code is auto-generated, and this involved quite a bit of hacking around in the build system and object instantiation, so there's the potential for exciting new bugs even for numbers in boring old geographic country codes, although I didn't have to change any of the existing tests so I am hopeful that I avoided that. [Here are the changes](https://github.com/DrHyde/perl-modules-Number-Phone/pull/114/files).  

I'd be grateful if you could test this, and assuming that no-one finds any bugs it will be in either the March or June quarterly release. You can download it from [here](  https://cpan.metacpan.org/authors/id/D/DC/DCANTRELL/Number-Phone-3.8099_01.tar.gz).
When to use React.Memo or PureComponent?
Published: 2023-01-12 20:27:53

When building a **React application**, it's important to consider the **performance** of your components. One way to optimize the performance of your application is to use the `React.memo` higher-order component and the `React.PureComponent` base class. These tools can help prevent unnecessary re-renders and improve the overall performance of your application.

## React.Memo
The `React.memo` higher-order component is used to wrap functional components and only re-render them if their props have changed. This is useful for components that are expensive to render or have a lot of logic, as it prevents them from re-rendering unnecessarily. For example, if you have a component that renders a large list of items, you can use `React.memo` to ensure that the component only re-renders when the list of items changes.

## React.PureComponent
The `React.PureComponent` is a base class that can be used instead of `React.Component` when creating a new component. The `React.PureComponent` automatically implements the `shouldComponentUpdate` method and compares the current and next props and state using a shallow comparison. This means that the component will only re-render if its props or state have been changed by a new reference.

## When we should avoid the use
It's worth noting that both React.memo and React.PureComponent only perform shallow comparison on props and state. If the component has deeply nested data structures, these methods will not work as expected, and you might need to use `shouldComponentUpdate `lifecycle method and implement your **_custom comparison function_**.

## Summary
In summary, `React.memo` is useful for functional components that are expensive to render or have a lot of logic, and `React.PureComponent` is useful for class components that have **simple props and state**. While both of these tools can help improve the performance of your application, they should be used with caution and in conjunction with other performance optimization techniques.
Partitions!
Tags: functional, clojure
Published: 2023-01-12 21:40:21

My friend [Peter](https://github.com/plpullen) pointed out that today is 01/12/23 (written in the standard US notation of mm/dd/yy). This is a great example of a partition! Specifically, a partition of 2 items and a step (overlap) of 1 for the list (0123).

In Clojure, this can be written as:
```clojure
(partition 2 1 [0 1 2 3]) ;; => ((0 1) (1 2) (2 3))
```

Partitions can be really useful to solve certain problems. I have been learning Clojure as part of the [#12in23](https://exercism.org/challenges/12in23) challenge, and here are two problems I solved using partition.

### [Sublist](https://exercism.org/tracks/clojure/exercises/sublist)
The goal of this problem was to determine if one list is a sublist of, superlist of, equal to, or not equal to another list. This is not the same as a subset, in that the order matters. The trick here is to partition the second list into sublists of the same length as the first list. If the first list is equal to one of those partitions, it is a sublist of the second list.
```clojure
(defn sublist? [list1 list2]
      (some #(= list1 %)
        (cons [] (partition (count list1) 1 list2)))
  )

(defn classify [list1 list2]
      (def is-sublist (sublist? list1 list2))
      (def is-superlist (sublist? list2 list1))
      (cond
        (and is-sublist is-superlist) :equal
        is-sublist :sublist
        is-superlist :superlist
        :else :unequal)
  )
```

### [Acronym](https://exercism.org/tracks/clojure/exercises/acronym)
This one took me a long time to solve. The goal is to return the acronym of a string, assuming that the letter of each word is used along with any hyphenated or camel cased words.

My first iteration involved a hacky mix of Regex, string splitting, and comparing the number of capital letters in a word to its length. After sleeping on it, I came up with this second iteration which doesn't involve any Regex. The idea is that we only want the letters that are uppercase followed by a lowercase letter, or lowercase letters that come after a non-letter (space or hyphen). Partitioning the string into chunks of two let me check each of these conditions.
```clojure
(defn keep-capitals [acc [fst snd]]
  (cond
    (and
      (Character/isUpperCase fst)
      (not (Character/isUpperCase snd)))
        (str acc fst) 
    (and
      (not (Character/isLetter fst))
      (Character/isLowerCase snd))
        (str acc (str/upper-case snd))
    :else acc))

(defn acronym
  "Converts phrase to its acronym."
  [phrase]
  (reduce keep-capitals "" (partition 2 1 phrase))
  )
```

What are some cool places you have seen partition show up?
I started a Youtube channel!
Tags: youtube, tutorial, feedback
Published: 2023-01-12 21:39:06

I've been wanting to start a Youtube channel for a while now, but I felt weird about recording my own voice. I finally hit that record button and did it! 

Here's the link for my channel: https://www.youtube.com/@adibhanna 

I would love some feedback on my first video [here](https://www.youtube.com/watch?v=SVD9tNAyWxY) 

I this video I teach about creating a RESTful API using Express and Typescript, I shows this topic because it's probably the easiest topic to talk about for me. 

Also, English is my 3rd language, I speak Arabic and French. So sometime I use some random words to describe something because I'm not sure how else to describe it. 

Peace!
Can I examine C++ as a beginner?
Tags: javascript, beginners, programming, python
Published: 2023-01-12 21:35:03

While anybody can examine to application in C++, having some prior  journey can be helpful, says Josh Lospinoso, CEO of the cybersecurity business enterprise Shift5 of [Backup Generator service](https://pittsburghgeneratorservice.com/?fbclid=IwAR2cANrQEIzCcbMBDrQ6I-_L4UKK3Z1kMVzyctEALp3SgXAzHuKvUf0BsOQ) and creator of the e book “C++ Crash Course.” Knowledge of fundamental computing phrases such as statements, “for” loops, “while” loops and different buildings frequent to C++ .
Rapyd Changelog: Client Portal Updates, Disburse, Payment Link Details
Tags: webdev, programming, payments, gateways
Published: 2023-01-12 21:23:12

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

Create a Payout using the new Disburse flow in Client Portal. Get notifications on Payout status and notify your customers via email. View more details of each Payment Link you create to accept payments continually from your customers. https://community.rapyd.net

## Presenter
Kyle Pollock - Technical Writer at Rapyd

## Resources
Developer Community https://community.rapyd.net/ 
Changelog https://docs.rapyd.net/build-with-rapyd/changelog/client-portal-updates-disburse-payment-link-details
Disburse https://docs.rapyd.net/client-portal/docs/disburse 
Creating a Payment Link https://docs.rapyd.net/client-portal/docs/creating-a-payment-link 
Payment Links https://docs.rapyd.net/client-portal/docs/payment-links 
Create Payout in Client Portal https://dashboard.rapyd.net/disburse/payouts/create-payout 

## Support
If you have a question, please feel free to reach out on our community https://community.rapyd.net, or our support team at https://support.rapyd.net.
 
## Feedback - short survey to help improve developer content  
​​https://rapyd.sjc1.qualtrics.com/jfe/form/SV_81yGd8ZtFL0YOSW

## Updates
Sign up to stay updated with developer news: https://www.rapyd.net/blog/category/developer/
 
## Table of contents 
00:00 Overview
00:09 Create Payout Client Portal Workflow 
04:07 Payout Status Page
04:49 Payment Links Details Page
05:49 Recap & Outro
My first GitHub Repository
Tags: python, tutorial, beginners
Published: 2023-01-12 21:08:30

Please feel free to check out the tutorial https://realpython.com/pygame-a-primer/

And my codes https://realpython.com/pygame-a-primer/

The most recent edit is this link https://github.com/007bionicalman/pygame-a-primer-on-game-programming-in-python-by-realpython/blob/master/Moving-Blue-Circle-Game 
Someone helped me figure out what was broken but I don’t understand what the code says. 

I need lots of help I’m a beginner