teleren/devto huggingface dataset:
How Scrimba Changed the Way I Learn Web Development.
Tags: scrimba, development, webdev, learning
Published: 2024-01-20 16:06:52

Scrimba, a platform that offers interactive courses and tutorials on web development, using technologies such as HTML, CSS, JavaScript, React, Vue, Angular, and more. Scrimba is different from other learning platforms, as it allows you to pause the screencasts, edit the code, and run it in your browser. This means you can learn by doing, not just by watching.

Scrimba's interactive screencasts are the core feature of the platform. They are recorded videos that show the instructor's code editor and browser, along with their voice and face. But unlike regular videos, you can pause the screencasts at any point, and start coding right there on the screen. You can also rewind, fast forward, and skip to any part of the screencast. You can even save your code and share it with others.

Checkout following video.
[This is the Scrimba way](https://scrimba.com/scrim/czvKPPsw)

This interactive feature makes learning web development more fun and effective. You can experiment with the code, see the results in real time, and fix your mistakes. You can also follow along with the instructor, and compare your code with theirs. You can also challenge yourself with the exercises and projects that are included in the courses and tutorials.

Scrimba also has other features and benefits that make it a great learning platform. For example, Scrimba has a curated pathway for beginners, which guides you through the essential topics and technologies that you need to learn to become a web developer. Scrimba also has a vibrant community of learners and instructors, who are always ready to help and support each other. Scrimba also hosts live events, such as webinars, workshops, and podcasts, where you can learn from experts and interact with other learners.



If you are interested in learning web development, or improving your existing skills, I would highly recommend checking out Scrimba. You can sign up for a free account, and start learning with the interactive screencasts. You can also join the Scrimba community, and participate in the live events. You will not regret it. Scrimba has changed the way I learn web development, and it can change yours too. Happy coding! 😊

And for more About Scrimba 
checkout [Scrimba](https://scrimba.com/).
(1) TypeScript: Create Optional Types From Old Types?
Tags: webdev, beginners, javascript, tutorial
Published: 2024-01-20 15:58:36

Here's a quick tip on how to use already-existing types to create a new type with  optional properties without changing the original type:


```ts
type ToptionalProps<T> = { [K in keyof T]?: T[K] };

// Example Interface:

interface Tuser {
  id: number;
  name: string;
  email: string;
}

type ToptionalUser = ToptionalProps<Tuser>;

// Equivalent to: type ToptionalUser = { id?: number; name?: string; email?: string };

// ==== And you can play around and Pick and Omit like so: =====

type TnameAndIdUser = Omit<Tuser, "email">
type TomittedOptionalProps<T> = { [K in keyof T]?: T[K] };

type ToptionalUser2 = TomittedOptionalProps<TnameAndIdUser>;

const newUser: ToptionalUser2 = {email: "newuser@gmail.com"}
// Error 'email' does not exist in type 'TpickedOptionalProps<x>';
``` 

With this trick, you can now easily create a type where all properties of the original type become optional.



Ts Playground: 
{% embed https://www.typescriptlang.org/play?#code/C4TwDgpgBAKg9mYBLOA7AhgGwAoCcEDOAPDAHxQC8UA3lANoDSUSqUA1hCHAGawC6AfgBcsRnygBfANwAoGQHp5UAKIAPdAFswmaAElUwCLm7oAxhCFyWh42egwArgSM0ZUZgBMRqBxoBGRrLuGBoWUATAuCwA5kFQEBroSJgiEVGosTIScqCQsAjIaFgAqs64lPmIKBg4+GDEjmWksgpKygCODkgAblgQBlDAcCK59gXVJWUVtEgewlA+-oELmhDzaTFS8YnJ65Exki2KlBSnUACCqB5QXA5Qpuis2uggUOj4DldvX9hIpmzfa4AeQ0SGAUEwSA44WGJ1OFBy4HsIQglw8ug8pRcVBBYJITiMABooAAiBJJTAk0gyUb5UHAQweIFVIq1QgkchUWiMZisDhcXgwQQiGBiQ6IvLwFk1LG4ABMFXg9MZzMKNTw7JgKLRGNlzTkpjQEQWEAA7rKReNWbKFVzyckRCSCOgPCTssdlLh8OUAOT2zA+qAeOAQAgLODgiCqJDGliDJFQH0wMB-DhM6VYDX1IiqUg+qRAA %}
Type Declaration Files
Tags: typescript
Published: 2024-01-20 15:30:24

Type Declaration Files are files that describe the whole API of a library that was written in Javascript. These files are the magic behind TypeScript. 

Let's break it down with a simple example:
Suppose there is a JavaScript library called mathLibrary.js with the following code:
```javascript
const add = (a, b) => {
    return a + b;
}
```
If we try to use this library in a TypeScript file, we will get an error saying that `add` function doesn't exist. This is because TypeScript doesn't know anything about this library (because it's written in JavaScript without any type annotations). So, we need to create a type declaration file for this library. Let's call it mathLibrary.d.ts. It will look like this:
```typescript
declare function add(a: number, b: number): number;
```
Now, when we try to use this library in a TypeScript file, we will not get any errors. This is because TypeScript now knows about this library and its functions. It knows that `add` function takes 2 numbers and returns a number. So, if we try to pass a string, it will show an error.

Typescript depends on type declaration files heavily. It's what makes TypeScript so powerful. If you do `npm install typescript`, you will see that it comes with a lot of type declaration files ".d.ts" files in the node_modules.

Note: There is a tool called [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) which has a lot of type declaration files for popular JavaScript libraries. You can install them using `npm install @types/<library-name>`. For example, if you want to install type declaration files for Googlemaps JS library, you can do `npm install @types/googlemaps` after that TypeScript will automatically find the type declaration files in the `node_modules/@types` folder and use them to check your code for errors.

**Resources:**
- [Type Declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html)
E-Commerce with Angular & Firebase, part three.
Tags: angular, firebase, tailwindcss, learning
Published: 2024-01-20 15:30:00

Hello friends, I hope you all are doing well and creating or setting up your project as per my last 2 blog posts (parts one and two). If you haven't gone through those posts then please follow in sequential and also follow me on my social media platform from my profile.
This is the 3rd blog post, I'll share how to set up the `firebase` in angular, I've installed the `firebase` in the part one blog, check that out, now I'll create the Firebase project in the firebase console if you know how to create the firebase project, then its good to know, if you don't know 🤔, follow this [article](https://firebase.google.com/docs/web/setup?continue=https%3A%2F%2Ffirebase.google.com%2Flearn%2Fpathways%2Ffirebase-web%23article-https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fweb%2Fsetup) or [this](https://www.youtube.com/watch?v=eeGKcZGkKrc).

## Steps to configure Firebase:
- **Step 1:** Copy the configuration code which will be provided by `firebase` and copy that code into your `src\firebase.config.ts` file, yeah you should create that file to store that configuration file. It'll look like this:

```typescript
const firebaseConfig = {
  apiKey: "********Your key********",
  authDomain: "********Your auth domain*******",
  projectId: "*******Your project id******",
  storageBucket: "******Your storage bucket id*******",
  messagingSenderId: "*****Message sender id*****",
  appId: "******Your app id*******",
  measurementId: "******Your measurement id********"
};
```
Inside this file, you've to export some variables, so this file will act like a global or centralized singleton object, which can handle the cloud I/O process, so there will not be new instances of an object while using the `firebase`.
so `firebase.config.ts` file looks like this:

```typescript
import { initializeApp } from 'firebase/app'
import { collection, getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth"

const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)
export const auth = getAuth(app)
export const productEntity = collection(db, "Products")
```
Now as you've seen I'm exporting the two variables db which is `firestore` and performing the task related to `Firestore database`, And the `productEntity` is a collection that refers to that particular collection where all products were saved.
As per our need, we'll create more collection references to make the `RDBMS` kind of structure in the `Firestore Database` because it's a `NoSQL` database.
So that's it for this blog, now you know how to configure `Firebase` into your `Angular`, next we'll set up the entities and user authentication.
Take care 🫡.
Ibuprofeno.py💊| #30: Explica este código Python
Tags: python, spanish, beginners, learning
Published: 2024-01-20 15:21:11

## **<center>Explica este código Python</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```py
## Reto #30
x = 10
def fn(entrada):
    entrada = 0
    return entrada

print(x)
print(fn(x))

```

- A. `10`, `10`
- B. `0`, `0`
- C. `10`, `0`
- D. `0`, `10`

---

Respuesta en el primer comentario.
Host Bar Part Time
Published: 2024-01-20 15:19:12

호스트바알바는 호스트바, 여성전용클럽, 호스트바, 아빠방, 러브바, 남자알바, 남자알바, 운동선수나라 등 운동선수를 전문으로 하는 호스트바 취업정보입니다. 호스트바나라, 남자들의 고액 아르바이트.
[호빠](https://www.ssalba.co.kr)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtxvu8nspbzkicq8fi48.jpg)
Unleash Your Morning Bliss with a Wholesome Amsterdam Breakfast Experience
Published: 2024-01-20 15:09:33


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

[https://wearebunk.com/amsterdam/restaurant/
](https://wearebunk.com/amsterdam/restaurant/
)
Dive into the Dutch Delight: Breakfast Amsterdam Style
Indulge in the perfect start to your day by embracing the Dutch way of breakfast in the heart of Amsterdam. At our charming establishment, we redefine the morning ritual, offering a hearty and authentic experience that will leave you invigorated and ready to conquer the day.
A Dutch-Inspired Breakfast Extravaganza
Immerse yourself in a culinary journey inspired by the vibrant streets of Amsterdam. Our menu boasts a delightful selection of traditional Dutch breakfast staples that cater to both locals and visitors seeking an unparalleled morning experience.
Bold Flavors, Bold Beginnings
Discover the bold flavors that define a Dutch breakfast. From delectable cheeses and freshly baked bread to savory meats and aromatic coffee, each bite is a celebration of the rich culinary heritage that Amsterdam has to offer.
Crafted with Love: The Essence of a Dutch Breakfast
Our breakfast isn't just a meal; it's a reflection of the Dutch culture, crafted with love and attention to detail. Savor the authenticity in every dish as we take you on a gastronomic adventure through the iconic flavors of Amsterdam.
Impeccable Ambiance, Impeccable Taste
Picture yourself in a cozy Amsterdam cafe, surrounded by the warm aroma of freshly brewed coffee and the soothing hum of morning chatter. Our ambiance complements the culinary excellence, creating an immersive experience that transcends the ordinary.
Why Choose a Dutch Breakfast?
1. Cultural Immersion
Immerse yourself in Dutch culture through the art of breakfast. It's more than just food; it's a cultural celebration on your plate.
2. Satisfy Your Senses
Experience a symphony of flavors, textures, and aromas that tantalize your taste buds and leave you craving for more.
3. Energize for the Day Ahead
A nutritious and hearty breakfast sets the tone for a productive day. Energize yourself with the wholesome goodness of Dutch delicacies.
Plan Your Visit: Breakfast Amsterdam Style
Ready to embark on a breakfast adventure like no other? Plan your visit to our Amsterdam establishment and treat yourself to a morning feast that transcends the ordinary. Elevate your day, Dutch style!
In conclusion, unlock the true essence of a morning in Amsterdam by savouring a breakfast that not only nourishes your body but also feeds your soul. It's time to make your mornings memorable, one Dutch bite at a time.
Animated Sidebar made using Rasengan and Tailwind
Tags: react, tailwindcss
Published: 2024-01-20 15:02:04

## What I did

I did an animated Sidebar using my own REACT FRAMEWORK (on which I'm working actually) and Tailwind.

## Demo

![Demo video of the animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44dhmkm5h6tjggdv7sas.gif)

## Links

GitHub - https://github.com/dilane3/animated-sidebar-rasengan.git
Live Demo - https://animated-sidebar-sigma.vercel.app/
Debounce In React
Tags: react, javacript, programming
Published: 2024-01-20 14:40:13

A function can be made to wait to execute until a certain amount of time has elapsed since it was last called by using a method known as debouncing. In instances in which we wish to avoid generating repetitive or unnecessary function calls that could be costly or lengthy, this can be advantageous.
Consider a search box where the user can type and receive ideas. Every keystroke that calls a function to retrieve suggestions could result in an excessive number of requests being sent to the server, slowing down the program and wasting resources. Alternatively, we may use debouncing to delay the request until after the user has paused typing for some time.
Debouncing prevents extra activations or slow functions from triggering

```

import { useRoutes } from 'react-router-dom';
import Debounce from './Debounce';
import Layout from './Layout';

function App() {
  return useRoutes([
    {
      path: "/",
      element: <Layout />,
      children: [{
        element: <Debounce />,
        path: "/"
      }]
    }
  ]
  );
}

export default App;

```

```
import React from 'react'
import { Outlet } from 'react-router-dom'

export default function Layout() {
    return (
        <Outlet />
    )
}

```

```
import React, { useState } from 'react';
import styles from './debounce.module.css'
export default function Debounce() {
    const [search, setSearchTerm] = useState('');

    const debounceSearch = (value) => {

        clearTimeout(debounceSearch.timeoutId);
        debounceSearch.timeoutId = setTimeout(() => {
            console.log('Searching for:', value);
        }, 300);
    };

    const handleChange = (event) => {
        const { value } = event.target;
        setSearchTerm(value);
        debounceSearch(value);
    };
    return (
        <>
            <section className={styles.main}>
                <input
                    type="text"
                    placeholder="Search..."
                    value={search}
                    onChange={handleChange}
                />
                <div>
                    Searching for {search}
                </div>
            </section>
        </>

    );
};

// export default Debounce;


```
Yep I’m single shoot your shot cowperson shirt
Published: 2024-01-20 14:30:21

Official Yep I’m single shoot your shot cowperson shirt

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

This embroidered soft cotton shirt is destined to be a hit. Order today and we’ll send you two for the Yep I’m single shoot your shot cowperson shirt Additionally,I will love this price of one. If you’re a fan, you won’t want to be without it. It is constructed of 100% preshrunk cotton and all LLC t-shirt carry a one-year quality guarantee against defects in workmanship. A shirt with a message that encourages you to do great things in the world, because sometimes in life you have to make your own opportunities by taking action. Someone who loves me very much went to New York and bought me this t-shirt. This t-shirt imagines an alternate universe in which someone who loves you very much went to New York City—and brought back a souvenir. Not that I’ve ever done anything like that—or ever will. Sure, why not? I bought a t-shirt from someone who loves me very much. It’s a funny white t-shirt, 100% preshrunk cotton.

Buy this shirt: [ Yep I’m single shoot your shot cowperson shirt](https://designatshop.com/product/yep-im-single-shoot-your-shot-cowperson-shirt/)

Home:  [Design AT Fashion LLC](https://designatshop.com/)
Getting an overview on my Twitter following
Tags: webdev, beginners, tutorial, twitter
Published: 2024-01-20 14:29:00

`
Well I think it's possible to extend the following script to get the following people of my Twitter account too 

```
from bs4 import BeautifulSoup
import requests

handle = input('Input the Twitter account name: ')
url = 'https://twitter.com/' + handle

temp = requests.get(url)
bs = BeautifulSoup(temp.text, 'html.parser')

try:
    # Extracting account name
    account_name = bs.find('a', {'class': 'ProfileHeaderCard-nameLink u-textInheritColor js-nav'}).text.strip()

    # Extracting followers count
    follow_box = bs.find('li', {'class': 'ProfileNav-item ProfileNav-item--followers'})
    followers = follow_box.find('a').find('span', {'class': 'ProfileNav-value'})
    followers_count = followers.get('data-count')

    print("Account Name: {}".format(account_name))
    print("Number of Followers: {}".format(followers_count))
except AttributeError:
    print('Account name not found or private account.')
```

This above script will be able  to display both the account name and the number of followers. But wait I want to get the following people of my Twitter account too.
This is not the tsc command you are looking for
Published: 2024-01-20 14:10:10

So, from what I have experienced, this problem occurs when you install typescript like this

```
npm install -g tsc             #don't do this
```

---
To solve this error, try to run this command in the terminal:

```
npm uninstall -g typescript
npm uninstall - g tsc
npm install -g typscript 
npm install -D typescript
```
I hope it helped :)
What are you learning about this weekend? 🧠
Tags: codenewbie, learning, beginners, discuss
Published: 2024-01-20 14:00:00

Heyo!

What are y'all learning about this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

Learn, relax, repeat. 📚🧘🔁

![A cartoon penguin wearing a hard hat, sunglasses, and a tool belt pulls out a hammer and spins it around in their before putting it back into their toolbelt like a badass. The words "work hard, play hard" are written at the top of the image.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csa7mvkhekaa8jpg16x3.gif)
Hoisting in JavaScript
Tags: javascript, programming, beginners
Published: 2024-01-20 13:48:31

Hoisting in JavaScript can be observed in various scenarios involving variables and functions. Let's explore different use cases with both `var` and function declarations.

### Use Case 1: Variables with `var`

```javascript
console.log(name);  // Output: undefined
var name = "John";
console.log(name);  // Output: John
```

In this example, the variable `name` is hoisted to the top of its scope, allowing us to access it before the actual declaration. However, its value is `undefined` until the assignment.

### Use Case 2: Function Declarations

```javascript
sayHello();  // Output: Hello, there!
function sayHello() {
  console.log("Hello, there!");
}
```

Function declarations are hoisted, enabling us to call the function before its declaration in the code. This facilitates cleaner code organization and logical flow.

### Use Case 3: Variables with `let` and `const`

```javascript
console.log(age);  // Error: Cannot access 'age' before initialization
let age = 25;
console.log(age);  // Output: 25
```

Unlike `var`, variables declared with `let` and `const` are hoisted but not initialized. Accessing them before initialization results in a ReferenceError.

### Use Case 4: Function Expressions

```javascript
greet();  // Error: greet is not a function
var greet = function() {
  console.log("Hello!");
};
```

Function expressions do not exhibit the same hoisting behavior as function declarations. Accessing them before the declaration results in an error.

### Use Case 5: Redeclaration with `var`

```javascript
var count = 5;
var count = 10;
console.log(count);  // Output: 10
```

`var` allows variable redeclaration within the same scope, and hoisting only considers the first declaration.

### Use Case 6: Hoisting within Functions

```javascript
function example() {
  console.log(innerVariable);  // Output: undefined
  var innerVariable = "I am hoisted!";
  console.log(innerVariable);  // Output: I am hoisted!
}
example();
```

Hoisting occurs within function scopes as well. The variable `innerVariable` is hoisted within the `example` function.
starter template ~ theme for Astro with tailwind
Tags: astro, webdev, tailwindcss, css
Published: 2024-01-20 13:47:15

Hello All!


I created a free open source [starter template for Astro with tailwind](https://astrolize.fabform.io) to get you up and running with a cool looking new website, landing page and blog --blazingly fast too!

The Astro Tailwind starter theme ~ template is called Astrolize. 

![starter template for Astro with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9y34u54h86r5dekze2w.png)

Check it out.

Enjoy!
Navigating Code Realms: Tales from 7 Years in Software 🌐👨‍💻
Tags: firstpost
Published: 2024-01-20 13:34:46

Hey there! I'm diving into the world of blogging on [Dev.to](https://dev.to/), and for my maiden voyage, I want to keep it real. No tech jargon, just a simple chat.

## Why Am I Here?

After seven years in the software world, I've gathered quite a few stories. I've been a part of the software development landscape since before the arrival of modern AI tools, and now, I continue to navigate this ever-changing terrain. I'm not here to show off my coding skills; I'm here to share what I've learned along the way. From the early days of confusion to now, where problem-solving is second nature – I want you to join me on this journey to share, to learn, and to foster a community that thrives on collective wisdom.🤝

## What's In Store?

This blog is like a diary of a coder. I'll spill the beans on those "aha!" moments, the times I got stuck, and how I found my way out. Expect stories, not just about finding solutions but the crazy adventures we face while coding.📖

## Join Me on the Ride

If you're a fellow coder or just curious about what happens behind the scenes, let's make this a conversation. No complex stuff, just a chat among friends in the coding world. I've got seven years of tales to share, and I'm excited to see what you think.🗣️

So, buckle up! We're in for a ride on this coder's journey, where the code is but a reflection of the stories we craft and the challenges we conquer. Let's make it a fun one together!✨

Happy Coding! 🚀👨‍💻