teleren/devto huggingface dataset:
Level Up Your Skills with the Ultimate TypeScript Guide!
Tags: typescript, javascript, webdev, tutorial
Published: 2023-08-05 08:28:11

## 🚀 Unleash Your Inner TypeScript Hero: From Zero to Super Coder! 📚🦸‍♂️


Hey fellow developers! Are you ready to become a TypeScript hero? 🔥 Whether you're a seasoned pro looking to expand your skillset or a TypeScript beginner eager to dive into the world of typed JavaScript, I've got some exciting news for you!

I created the most comprehensive TypeScript guide that will take you from Zero to Hero in no time! 🎓 This guide covers all the essentials, from TypeScript basics to advanced type systems, and even industry-proven best practices for writing clean and scalable TypeScript code. It's a game-changer!

### 🔍 What's Inside?

✅ **TypeScript Basics:** Master the fundamentals of TypeScript, including types and interfaces.
✅ **Advanced Type System:** Dive deep into TypeScript's powerful type system and unleash its full potential in your projects.
✅**Best Practices:** Discover battle-tested techniques for writing maintainable and efficient TypeScript code.
✅ **Real-World Examples:** Learn by doing with practical examples that reinforce your learning.

This guide is a treasure trove of knowledge that aims to empower developers of all levels to confidently embrace TypeScript in their workflows. Whether you're building web applications, backend services, or just exploring TypeScript, this guide will equip you with the knowledge and skills to take your projects to new heights.

So, what are you waiting for? Don't miss out on this amazing opportunity to level up your TypeScript journey!

Grab the PDF of this incredible [guide here](https://www.linkedin.com/posts/ritikbanger_typescript-the-ultimate-guide-activity-7093124357652135936-eXXi?utm_source=li_share&utm_content=feedcontent&utm_medium=g_dt_web&utm_campaign=copy) and start your transformation from a TypeScript novice to a TypeScript hero today!

And let's not keep this treasure to ourselves – share this post with your fellow developers who are as passionate about TypeScript as we are. Let's grow as a community and empower each other in our development journeys!

Remember, the power of TypeScript is at your fingertips, and with this guide, you'll be unstoppable! Happy coding! 💻💪


{% embed https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7093124354753859584 %}
Leads Finder - Your AI B2B lead generation partner
Tags: b2b, leads, leadgeneration, email
Published: 2023-08-05 08:25:36

Our startup provides an unparalleled service in the B2B market by harnessing the power of AI to identify, validate and consolidate lead lists at scale, in any field.

We don't just offer leads; we offer opportunities, precision-targeted by AI. Partner with us to enlighten your business with the future of B2B lead generation.

Stop buying outdated and general lead lists and contact us today.

[https://leadsfinder.ai](https://leadsfinder.ai)
Simulate React fast-refresh in automated tests
Published: 2023-08-05 08:23:08

I needed to do this today and found [this topic](https://github.com/testing-library/react-testing-library/issues/849), which didn't make me much wiser. Since I found no documentation on how to test react-refresh, I checked out the [react-refresh test suite](https://github.com/facebook/react/blob/main/packages/react-refresh/src/__tests__/ReactFresh-test.js) and started reverse engineering. Took me a while to figure the ins and outs of it, but I managed to make it work eventually, even while using testing-library (the react-refresh test suite was not using testing-library). Here's my implementation:

https://github.com/kasper573/yas/blob/194f87e433bfc924b66969a3283376e3d1c90562/packages/react-composable-form/src/__test__/reactFastRefresh.test.tsx

It was an interesting day of reverse engineering. I wish there was more docs about this, so I'll share my work and some thoughts in case someone else needs to work with this:
Using react-refresh/runtime to simulate react-refresh in your tests is brittle

To properly make your tests mimic how react-refresh works in a development server you need to be intimately aware with how react-refresh actually utilizes its runtime functions. If you don't do it exactly right, you will get false positives (or negatives). I stuggled with this a lot until I got it to work.

Make sure you call RefreshRuntime.register for each component in the component tree that you pass to testing-library/render, not just the root component.

> It was not clear to me that this was a requirement when I looked through the react-refresh test suite, but I learned that this is how react-refresh works by booting up vite with react and testing a number of fast refreshes and inspecting the network tab in my dev tools to see what the actual javascript that was being sent on each update looked like. There I could observe that indeed every component in the updated module got picked up by react-refresh and had its own RefreshRuntime.register call added.

# Ideas for a less brittle end-to-end test approach

I only needed a few simple tests, so using react-refresh/runtime in jest was a good trade-off for me. But I considered the idea of using playwright instead and test against a dev server with react-refresh enabled, and have my tests actually emulate the developer process by making code changes to the files being served by vite, and trigger fast refresh that way instead. This approach would avoid needing to replicate the implementation details of react-refresh, which would make the tests way less brittle. If I were to do this whole thing again, or if I needed to write a much larget test suite, I'd definitely try the playwright approach instead.
How to access forem files ?!
Tags: forem, fedora, webdev, beginners
Published: 2023-08-05 07:46:42

Hello,

I followed this guide to install a forum instance on fedora os on digital ocean.

Well, I succeded 😀 and my question now (how stupid it could be) is how I could access the " script " files since we did not set up a root pass. 

Any help, please? 😉
Thank You!
Intersection observer api & lazy loading in REACT
Tags: react, beginners, learning, typescript
Published: 2023-08-05 07:35:03

## INTRODUCTION

Let's embark on an exciting journey to control how our app behaves as the user scrolls and ensure our components only render when they are in the user's view. And to top it off, we want to achieve this in a lazy loading fashion!

Introducing the **_Lazy Component Wrapper_** - a simple guide to achieving this seamlessly. Let's dive in and experience the magic of lazy rendering! 

 
## LAZY COMPONENT WRAPPER

This component will render the children component only when it becomes visible to the user. By using the Intersection Observer API:

```
function LazyComponentWrapper({ children, className, id }: LazyComponentWrapperProps) {
    const [isVisible, setIsVisible] = useState(false);
    const componentRef = useRef<HTMLElement | null>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        setIsVisible(true);
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.5 } as IntersectionObserverInit
        );

        if (componentRef.current) {
            observer.observe(componentRef.current!);
        }

        return () => {
            if (componentRef.current) {
                observer.unobserve(componentRef.current!);
            }
        };
    }, []);

    return (
        <section
            ref={componentRef}
            className={`${className} ${isVisible ? styles.visible : styles.notVisible}`}
            id={id}>
            {isVisible && children}
        </section>
    );
}
```

Not only does this component enable lazy rendering, but it also allows us to add captivating animations and styles to animate the components as they appear on the user's screen. And to achieve this enchanting effect, we'll make use of CSS modules!.

```
.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-in-out;
}

.notVisible {
    opacity: 0;
    transform: translateY(80px);
}
```


## LAZY IMPORTS AND SUSPENSE

Finally, let's import our components and wrap them with our magnificent **_LazyComponentWrapper_**:✨

```
const Component = lazy(() => import("../../Component.tsx"));

<LazyComponentWrapper>
   <Suspense fallback={<div>Loading...</div>}>
      <Component />
   </Suspense>
</LazyComponentWrapper> 
```

Now, your component will render only when the user needs it, thanks to the use of lazy loading and the Intersection Observer API. 

Additionally, adding specific styles with CSS modules adds an extra touch of charm to the user experience.

Happy coding! ✨🚀

@oscarprdev
I made a new VS Code theme. This hits different.
Tags: vscode, themes
Published: 2023-08-05 07:28:07

Hello everyone, last night I couldn't sleep so I decided to create a new theme based on a color palette that I made and added to one of my tool sites ( colorsandfonts. com ). 

Amrit suggested to create a VS Code theme, so here it is and I liked it so much that is published.

You can grab the theme here: 

http://marketplace.visualstudio.com/items?itemName=wicked-labs.cocoa-butter

The theme colour is chocolate brown, then added some sprinkles.

Hope you all like it!

Any questions x.com/mike_andreuzza


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

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


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



![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m0fg0atmbctp45yjd6p.png)
JavaScript Made Easy: Master Destructuring Assignment in a Flash
Tags: javascript, webdev, tutorial, beginners
Published: 2023-08-05 07:07:33


---
title: "JavaScript Made Easy: Master Destructuring Assignment in a Flash"
published: true
description: "A comprehensive guide to understanding and effectively using destructuring assignment in JavaScript."
tags: javascript, webdev, tutorial, beginners
---

## Table of Contents

1. [Introduction](#introduction)
2. [Array Destructuring](#array-destructuring)
3. [Object Destructuring](#object-destructuring)
4. [Value Swapping and Function Parameters](#value-swapping-and-function-parameters)
5. [Conclusion](#conclusion)

### Introduction

Hello there! Today, we will be exploring a handy feature in JavaScript known as **Destructuring Assignment**. Destructuring assignment serves as a powerful tool for extracting data from arrays or objects and assigning them to variables. Let's dive right in!

### Array Destructuring

Array destructuring allows us to extract elements from an array and assign them to respective variables. Here's an example:

```javascript
let [first, second, third] = ['apple', 'banana', 'carrot'];
console.log(first);  // 'apple'
console.log(second); // 'banana'
console.log(third);  // 'carrot'
```

In the above code, we're destructuring the array `['apple', 'banana', 'carrot']` and assigning its elements to `first`, `second`, and `third` variables respectively.

### Object Destructuring

Next, let's delve into object destructuring. With object destructuring, we can extract properties from an object and assign them to variables.

```javascript
let {name, age} = {name: 'John', age: 30};
console.log(name);  // 'John'
console.log(age);   // 30
```

In the above code, we're destructuring the object `{name: 'John', age: 30}` and assigning its properties to `name` and `age` variables respectively.

### Value Swapping and Function Parameters

Destructuring assignment can also be utilized for value swapping and extracting function parameters. First, let's take a look at value swapping.

```javascript
let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1
```

In the above code, we're swapping the values of `a` and `b` in a single line.

Next, let's consider function parameter extraction.

```javascript
function greet({name, age}) {
  console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
}

greet({name: 'John', age: 30});  // 'Hello, my name is John and I'm 30 years old.'
```

In the above code, we're passing an object to the `greet` function as a parameter and extracting the `name` and `age` properties from it.

### Conclusion

In this post, we've walked through the basics of JavaScript's destructuring assignment. With this powerful feature at your disposal, you're well on your way to more efficient coding!

Until next time, Happy Coding!
Testing in Sinatra
Published: 2023-08-05 07:03:57




Testing in Sinatra is commonly done using a combination of `RSpec` for structuring the tests and `Capybara` for simulating user interaction

![Capybara](https://images.unsplash.com/photo-1595017013941-cab3d4c8d02f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80)
Understanding the Singleton Pattern in Go
Tags: webdev, go, beginners, programming
Published: 2023-08-05 07:03:42

## Singleton Pattern
The Singleton Pattern is a creational design pattern that ensures a class has only one instance and provides a global point of access to that instance. This pattern is particularly useful when there's a need to coordinate actions that can't be shared among multiple instances.

### Implementing the Singleton Pattern in Go
Let's dive into a practical example of implementing the Singleton Pattern in Go. We'll create a `DriverPg` type that represents a PostgreSQL database driver connection. The `Connect` function initializes and returns the singleton instance in a thread-safe manner using `sync.Once`.

```go
package main

import (
	"fmt"
	"sync"
	"time"
)

var (
    once sync.Once
    instance *DriverPg
)

// DriverPg represents a PostgreSQL database driver connection.
type DriverPg struct {
	conn string
}

// Connect returns the singleton instance of DriverPg.
func Connect() *DriverPg {
	once.Do(func() {
		instance = &DriverPg{conn: "DriverConnectPostgres"}
	})
	return instance
}

func main() {
	// Simulate a delayed call to Connect.
	go func() {
		time.Sleep(time.Millisecond * 600)
		fmt.Println(*Connect())
	}()

	// Create 100 goroutines.
	for i := 0; i < 100; i++ {
		go func(ix int) {
			time.Sleep(time.Millisecond * 60)
			fmt.Println(ix, " = ", Connect().conn)
		}(i)
	}

	fmt.Scanln()
}
```
In this example, the `DriverPg` type represents a database driver connection. The `Connect` function ensures that the initialization code is executed only once using the `once.Do` construct from the `sync` package. This guarantees the thread-safe creation of a single instance of `DriverPg`.

The code demonstrates that despite multiple concurrent calls to `Connect`, the initialization logic is executed only once, ensuring that all goroutines share the same instance of `DriverPg`.

## Conclusion 🥂
The Singleton Pattern with sync.Once is a robust and elegant solution for managing single instances across multiple goroutines. By combining the benefits of the traditional Singleton Pattern with thread-safety, this approach enables secure and efficient access to shared resources and configurations.

### Reference
- [How singleton pattern works with Golang](https://medium.com/golang-issue/how-singleton-pattern-works-with-golang-2fdd61cd5a7f)
Coding Eternally: Lifelong Learning for Continuous Growth?
Tags: codenewbie, beginners, discuss, career
Published: 2023-08-05 07:00:00

_Welcome to "Discover Your Code," guided by our official DEV moderator, Sloan the Sloth 🦥. This series is designed to help aspiring coders and students explore the coding universe, ignite their passion, and find their ideal career paths._

Today's question is:

> Are you ready to dive into a continuous journey of learning and growth as a coding enthusiast? How will you make it happen?

Responses from newbies and experienced devs alike are encouraged in order to broaden our horizons and showcase different POVs.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Challenging Bosses: How Did You Navigate?
Tags: discuss, carreer, learning
Published: 2023-08-05 07:00:00

_Discover diverse career growth stories and coding journeys in "Mentors & Mentorships" on The Daily Byte. Get inspired! 💻🌟_

> On the flip side (of yesterday's discussion question), share an experience with a challenging boss or manager. How did you navigate the situation, and what did you learn from it?


Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
DATA VISULIZATION
Tags: datascience
Published: 2023-08-05 06:45:54

Data visualization is the graphical representation of data and information. It involves creating visual elements such as **charts**, **graphs**, and **maps** 

to **help understand** 
- trends, 
- patterns,
- insights in the data.

**WORKING:**


**1. Data Preparation:** 

Gather and preprocess the data to ensure it's in a suitable format for visualization.

**2. Choose Visualization Type:**
 

Select the appropriate type of chart or graph based on the data and the insights you want to convey.

**3. Plotting:**
 

Use a data visualization library to create the visual representation of the data.

**4. Customize:**
 

Enhance the visualization by adding labels, titles, colors, and other visual cues to improve readability.

**5. Interpretation:**

Analyze the visualization to draw meaningful conclusions and communicate the findings effectively to the audience.


**Data visualization lab tools:**

1. Matplotlib
2. Seaborn
3. Power BI
4. Tableau
5. Excel
6. Google Data Studio
7. QlikView
Latest Newsletter - Our Fake Everything Future: Economies, Internets and Families (Issue #126)
Tags: javascript, tech, webdev, discuss
Published: 2023-08-05 06:43:09

---
title: Latest Newsletter - Our Fake Everything Future: Economies, Internets and Families (Issue #126)
published: true
description: Everything is fake these days. How bad could it get? In the future even cake will be fake. How will you prepare for our fake cake future?
tags: javascript, tech, webdev, discuss
---

Our Fake Everything Future: Economies, Internets and Families (Issue #126)

Everything is fake these days. How bad could it get? In the future even cake will be fake. How will you prepare for our fake cake future?

https://markjgsmith.substack.com/p/mark-smiths-newsletter-05-08-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Dynamic path segments
Published: 2023-08-05 06:31:54

We improved the code for our dice rolling web app by adding support for all possible combinations of number of dice and type. 

We refactored the `app.rb` code with 1 addition and deleting 42 delitions!



```ruby
#.rb

get("/dice/:number_of_dice/:how_many_sides") do

  @num_dice = params.fetch("number_of_dice").to_i

  @sides = params.fetch("how_many_sides").to_i

  @rolls = []

  @num_dice.times do
    die = rand(1..@sides)

    @rolls.push(die)
  end

  erb(:flexible)
end
```

`.erb`
```erb

<h1><%= @num_dice %>d<%= @sides %></h1>

<ul>
  <% @rolls.each do |a_roll| %>
    <li>
      <%= a_roll %>
    </li>
  <% end %>
</ul>

```
Sticky navbar only using CSS
Tags: webdev, javascript, tutorial, css
Published: 2023-08-05 03:45:52

One effective technique to enhance navigation is by implementing a sticky navbar. A sticky navbar remains fixed at the top of the page as users scroll, providing easy access to important links and content. In this blog post, we'll delve into the process of creating a sticky navbar using HTML and CSS, with a focus on the `position: sticky` and `top: 0` properties.

## Understanding the `position: sticky` Property:

The `position: sticky` property is a powerful CSS attribute that blends the behaviors of both `position: relative` and `position: fixed`. It allows an element to behave as relatively positioned within its parent container until a certain threshold (usually defined by the viewport) is reached. Once this threshold is crossed during scrolling, the element becomes fixed to the specified position.

### HTML Structure:
Before we dive into the CSS, let's set up the HTML structure for our sticky navbar:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags, title, and link to CSS -->
</head>
<body>
  <header class="sticky-header">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <!-- Rest of the page content -->
</body>
</html>
```

### Applying the CSS:
Now, let's bring our sticky navbar to life using the `position: sticky` property and the `top: 0` value:

```css
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.sticky-header {
  background-color: #333;
  color: #fff;
  position: sticky; /* Apply the sticky positioning */
  top: 0; /* Stick the element to the top of the viewport */
  z-index: 100; /* Ensure the navbar is above other content */
}

.sticky-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.sticky-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.sticky-header li {
  margin-right: 20px;
}

.sticky-header a {
  text-decoration: none;
  color: #fff;
}
```

## Achieving a Smooth User Experience:

Implementing a sticky navbar isn't just about sticking an element to the top. To create a smooth and engaging user experience, consider these additional tips:

1. **Responsive Design**: Ensure your sticky navbar is responsive and adapts gracefully to different screen sizes. Utilize CSS media queries to adjust styles as needed.

2. **Transition Effects**: Apply CSS transition effects to smoothly animate the transition from relative to fixed positioning. This enhances the visual appeal and professionalism of your navbar.

3. **Clear Design**: Keep the design of your navbar clean and easy to read. Clear typography and well-spaced navigation links contribute to a positive user experience.

4. **Testing and Feedback**: Test your sticky navbar across different browsers and devices to ensure consistent behavior. Consider gathering user feedback to make improvements.