teleren/devto huggingface dataset:
SvelteLab a supercharged REPL for Svelte
Tags: podcast, webdev, javascript, beginners
Published: 2023-12-18 07:40:11

Original: https://codingcat.dev/podcast/3-17-sveltelab-a-supercharged-repl-for-svelte
				  {% youtube https://youtu.be/S1iakhstHlc %}
				  {% spotify spotify:episode:4b4pdhugoBBrMAIsQin1WS %}
				  
[Svelte](https://svelte.dev/) is a modern JavaScript framework for building user interfaces. It is known for its reactivity, performance, and small bundle size. SvelteLab is a powerful development environment for Svelte that provides a range of features to enhance your development experience.

### Key Features of SvelteLab

[SvelteLab](https://www.sveltelab.dev/) offers a variety of features that make it an ideal tool for Svelte development. These features include:

- **Light/dark mode:** Switch between light and dark mode to suit your preferences.
- **TypeScript errors:** Get real-time TypeScript error checking to ensure your code is clean and error-free.
- **Command Palette:** Access a variety of commands quickly and easily using the Command Palette.
- **Code formatting:** Keep your code organized and consistent with automatic code formatting.
- **Templates:** Start your projects with pre-built templates for TypeScript, Tailwind, and mdsvex.
- **SvelteKit file icons:** Easily identify SvelteKit files with distinct icons.
- **SvelteKit route generation:** Quickly generate new routes for your SvelteKit application.
- **Svelte Add:** Install Svelte components and other packages directly from SvelteLab.
- **Vim keybindings:** Use familiar Vim keybindings for efficient code editing.
- **Hide config clutter:** Keep your file tree clean by hiding configuration files.

### Benefits of Using SvelteLab

There are many benefits to using SvelteLab for Svelte development. These benefits include:

- **Increased productivity:** SvelteLab's features help you to write code more quickly and efficiently.
- **Reduced errors:** SvelteLab's real-time TypeScript error checking and code formatting help you to write clean and error-free code.
- **Improved development experience:** SvelteLab's intuitive and user-friendly interface makes it a pleasure to work with.

### Getting Started with SvelteLab

Getting started with SvelteLab is easy. Simply visit the SvelteLab website and click on the "Try SvelteLab" button. You can also install SvelteLab locally using npm or yarn.

Once you have SvelteLab up and running, you can start creating Svelte components and applications. SvelteLab provides a variety of features to help you get started, such as templates and code snippets.

### Conclusion

SvelteLab is a powerful and user-friendly development environment for Svelte. It is a great tool for both new and experienced Svelte developers. With its many features and benefits, SvelteLab can help you to write code more quickly, efficiently, and error-free.

If you are looking for a way to improve your Svelte development experience, then I encourage you to give SvelteLab a try. You won't be disappointed.
Understanding Kubernetes: part 50 – Kubernetes 1.29 Changelog
Tags: kubernetes, devops, docker, beginners
Published: 2023-12-18 07:32:43

---
title: Understanding Kubernetes: part 50 – Kubernetes 1.29 Changelog
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zonddlepsznrgeohoi11.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with a focus on what's new in the new version of Kubernetes: v1.29.

![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zonddlepsznrgeohoi11.jpg)
![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnaphzcvltax36klntoa.jpg)
![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo0ehezvjpsxnh42ihql.jpg)
![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpgoc8ic6byonke3ksxa.jpg)
![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4ynquyb02b1jflt2htv.jpg)
![Kubernetes 1.29 changelog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbfzjm2gbnzj0ke7xl45.jpg)

[Kubernetes 1.29 Complete changelog](https://kubernetes.io/blog/2023/12/13/kubernetes-v1-29-release/)

If you are interested, I published an entire illustrated book about Kubernetes, available in paperback on [Amazon](https://www.amazon.fr/dp/B0BB619188/ref=cm_cr_arp_d_product_top?ie=UTF8) and in digital version on GumRoad: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Python & OpenAI beginner journey 2 | def main()
Tags: python, openai, beginners, main
Published: 2023-12-18 07:30:40

For the first few python documents I wrote, I just started writing my code on an empty page, before I learned about [main()](https://realpython.com/python-main-function/).

For some time I always asked ChatGPT to generate the main function for me since I could never remember how exactly it has to look.

Now I just saved it as a code block in [Notion](https://affiliate.notion.so/6pu3ut88v26x-4y5a7) and quickly copy it in my new python program from there.

I’m not sure yet what exactly the best way is to store and reuse code blocks that appear frequently. Does anyone have recommendations?

```python
def main():
    ...

if __name__ == '__main__':
    main()
```
Bruins fight it out with Resources, however fall 5-4 in OT
Published: 2023-12-18 07:29:31

 <br> The Boston Bruins dropped tonight's preseason game versus the Washington Capitals,  5-4,  at the TD Garden.There is some tightening approximately do as professionals return into the groove and the group figures out special teams.Big choices for Head Coach Jim Montgomery to make as training school winds down. Tonight's game didn't make points any easier for him as Matt Poitras continued to make his case for a roster spot.As the Bruins found themselves down by a score in the 3rd period,  the 19-year-old made an experienced play to also the game.The whole video game was a limited competition from the beginning with a goal apiece from each team in the very first minute of play.Although momentum and scoring possibilities was inclined in the direction of the Resources,  the Bruins utilized on rate and quick shots to stay in the game.The Milan Lucic <a href="https://www.capitalsprostore.com/brooks-laich-jersey">Brooks Laich Jersey</a>,  John Beecher and Jakub Lauko line could be a sneak peek of the Bruins' 4th line as they complemented each various other. The line revealed speed and continual offensive area stress to registered two objectives tonight.The Bruins conclude preseason on Thursday,  Oct. 5 when they face the New York Rangers when driving. Below are the highlights from the video game: Initial duration: The Capitals opened the scoring 26 seconds right into the initial period.John Carlson got the puck out front for Connor McMichael to select it up and lift a backhander past Linus Ullmark's glove. 1-0 Fundings. ICYMI Washington Capitals October 3,  2023The Bruins connected the game minutes later at 53 seconds of the first period.On a 3-on-2,  David Pastrnak dished a pass to James van Riemsdyk collapsing the slot for a fast breeze shot past Darcy Kuemper. 1-1 game. A van Riemsdyk rocket Boston Bruins October 3,  2023 The Bruins took the lead at 2:42 of the very first period.Charlie McAvoy fed a brief pass to Milan Lucic on top of the conservative circle where he located Mason Lohrei skating down the left side. Lohrei terminated a wrist shot past Kuemper to make it 2-1 Bruins. From Looch to Lohrei Boston Bruins October 3,  2023The Capitals connected the game at 7:51 of the first duration on the power play.With tic-tac-toe death <a href="https://www.capitalsprostore.com/martin-fehervary-jersey">Martin Fehervary Jersey</a>,  Nicklas Backstrom handed the puck off to Evgeny Kutznetsov along the goal line that quickly found Tom Wilson in the slot for a quick snap shot past Ullmark's blocker.`
How to connect to a database inside a docker
Tags: docker, ssh, database
Published: 2023-12-18 07:27:54

If you host your database on a VPS and using docker. You do not want to map your database port to the VPS port. Example your `docker-compose.yml` is:
```
version: '3.1'
services:
  your_db:
    image: mysql:8.0.31
    container_name: your_db
    restart: always
    networks:
      main_default:
    env_file:
      - ./db.env
    volumes:
      - ./volumes/your_db:/var/lib/mysql
```
And you want to connect to this database from your local machine. Here is the way:

With above docker-compose file, we can't connect to to mysql database from your local machine, also from the VPS. However, if we have another docker container also in that docker compose file, it can connect to mysql using port 3306.
Here's the thing we will do:
- We will add new docker container with ssh server installed. We open ssh port to a random port. We also need to enable tcp forwarding in ssh configuration. I already created an image and push to docker hub, let's use my image and update above docker-compose.yml to
```
version: '3.1'
services:
  ssh:
    container_name: ssh
    image: trngon/alpine-ssh
    ports:
      - "1234:22"
    volumes:
      - ./your-ssh-dir:/root/.ssh
    restart: always
  your_db:
    image: mysql:8.0.31
    container_name: your_db
    restart: always
    networks:
      main_default:
    env_file:
      - ./db.env
    volumes:
      - ./volumes/your_db:/var/lib/mysql
```
Now, you can use the tool like Sequel Ace or dbeaver to using using ssh tunnel option. Put your database user/password as you set. The hostname is `your_db` (use your own if you changed it). Then the ssh host is your vps IP, user name is root and the key is the key you mapped above.The port is 1234 (if you do not change)

If you want to customize the ssh image, here is the docker file that you can re-use
```
FROM alpine:3.18.5

LABEL authors="Tran Trung Ngon"

RUN apk add --update --no-cache openssh

# You can remove it if do not want to add a key to this image
COPY ./ssh/authorized_keys /root/.ssh/authorized_keys

RUN apk add openrc && rc-update add sshd

COPY ./ssh/sshd_config /etc/ssh/sshd_config

COPY entrypoint.sh /entrypoint.sh

EXPOSE 22

ENTRYPOINT ["/entrypoint.sh"]
```
`entrypoint.sh`
```
#!/bin/sh
ssh-keygen -A
/usr/sbin/sshd -D -e
```
`sshd_config`
```
Port 22
AuthorizedKeysFile	.ssh/authorized_keys
AllowTcpForwarding yes
GatewayPorts no
X11Forwarding no
Subsystem	sftp	internal-sftp
```
Handle Waits in Selenium With C#
Tags: csharp
Published: 2023-12-18 07:20:42

In Selenium automation testing with C#, waiting for certain elements to load or become visible is a crucial aspect. Handling these waits effectively ensures that tests are executed accurately and reliably. 

Selenium offers various methods to handle waits, allowing testers to synchronize their code with the application's behavior. Here are a few commonly used techniques:

1. Implicit Waits: Implicit waits allow the WebDriver to wait for a certain amount of time before throwing an exception if the element is not immediately found. This wait is applicable to all elements in the script, reducing the need for writing explicit waits repeatedly.

    ```csharp
    driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);
    ```

2. Explicit Waits: These waits are more specific and defined for individual elements. Developers can tell the WebDriver to wait until a certain condition is met, such as element visibility or clickability, before proceeding with the test execution.

    ```csharp
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    IWebElement element = wait.Until(ExpectedConditions.ElementIsVisible(By.Id("elementId")));
    ```

3. FluentWait: FluentWaits provide more flexibility compared to explicit waits. Testers can define the conditions and the polling intervals for the wait. This is particularly useful when waiting for dynamic elements that may take longer to load.

    ```csharp
    DefaultWait wait = new DefaultWait(driver);
    wait.Timeout = TimeSpan.FromSeconds(20);
    wait.PollingInterval = TimeSpan.FromMilliseconds(500);
    wait.Until(d => d.FindElement(By.Id("elementId")).Displayed);
    ```

By using these different types of waits, testers can effectively handle synchronization issues in their C# Selenium scripts. Implementing waits appropriately can enhance the consistency, performance, and reliability of test cases by ensuring that elements are available before performing subsequent actions.
A short Story to understand the difference between JavaScript DOM & BOM - Hope it helps
Tags: webdev, javascript, programming, beginners
Published: 2023-12-18 07:23:35

Once upon a time, 🏙️ in a bustling city, there were two siblings named Dee and Jay. Both were fond of building and organizing things around their house, but they had different approaches. Dee loved arranging and decorating the rooms inside their house, making sure everything was in the right place, from furniture to toys, just like how JavaScript manipulates the Document Object Model (DOM) 🖼️🪟. On the other hand, Jay was more interested in the outer aspects, like the garden, windows, and the overall structure of the house, resembling how JavaScript interacts with the Browser Object Model (BOM) 🏡🌿.

Dee, the meticulous one, was always seen inside the house, reorganizing the furniture, hanging up paintings, and making the rooms look appealing. She likened her work to JavaScript DOM, where she manipulated and arranged elements within the web page. For her, it was crucial that everything inside the house was in perfect order and looked exactly the way she envisioned 🏠🔍.

Jay, the adventurous sibling, spent most of his time outside, tending to the garden, cleaning the windows, and ensuring the house was safe and secure from the outside world. He compared his work to JavaScript BOM, where he interacted with the browser itself, managing the browser window, checking if it was secure, and handling things beyond the confines of the web page 🌐🔒.

Their parents, who were tech-savvy, saw the parallels between their children's activities and JavaScript. They explained that just like Dee focused on the interior (DOM) and Jay on the exterior (BOM), JavaScript, too, had these distinct roles. They emphasized that the DOM dealt with elements and content inside the webpage, allowing manipulation and organization, while the BOM worked with the browser window and its properties, enabling control over the browser itself 🧩🔧.

As Dee and Jay grew up, they realized the importance of both aspects. Dee understood that without a strong foundation (BOM) and proper handling of the external factors, the interior (DOM) wouldn't function optimally. Jay acknowledged that ensuring the security and smooth operation of the browser (BOM) was equally important as arranging the content and elements inside the web page (DOM) 🔄🧱.

Together, they learned that while their interests might have been different, they were both crucial components of the larger picture, just like JavaScript's DOM and BOM were vital aspects of web development. And thus, they collaborated to create a harmonious living space both inside and outside their house, much like how JavaScript harmonizes the user interface and browser functionalities to create compelling web experiences 🌟✨.
Unlocking the Power of Objects in Object-Oriented Programming (OOP)
Tags: oop, csharp, programming, dotnet
Published: 2023-12-18 07:23:15

Objects serve as the lively foundations of software engineering, encapsulating real-world items and functionalities within code. These dynamic entities, identical to players on a digital stage, play an essential role in modern programming, encapsulating attributes and behaviors within instances of classes. Join us on a tour through the immersive world of OOP's objects as we examine their significance, dive into their creation, and observe how important they are in developing powerful and adaptive software applications.

## Objects
In **Object-Oriented Programming (OOP)**, objects are instances of classes that contain data (attributes or properties) and behavior (methods or functions). They represent real-world entities, concepts, or instances in a program.

**Here are some crucial points regarding objects:**

- **Instances of Classes:** Objects are formed based on the blueprint or template defined by a class. Each object created from a class is an independent instance with its own set of properties and behaviors defined by that class.

- **Properties:** Objects contain attributes or properties that define their state. These properties store data relating to the object. 
_<u>For example,</u> a **Car** object might have properties like **brand**, **model**, **color**, etc._

- **Behaviors or Methods:** Objects can perform actions or behaviors using methods. Methods are functions associated with objects that allow them to interact with their own data or perform certain tasks. 
_<u>For instance,</u> a **Car** object might have methods like **startEngine()**, **accelerate()**, **stop()**, etc._

```C#
//Object Example

class Car
{
    public string Brand { get; set; }
    public string Model { get; set; }

    public void DisplayInfo()
    {
        Console.WriteLine($"Car Information: {Brand} {Model}");
    }
}

class Program
{
    static void Main()
    {
        // Creating an instance (object) of the Car class
        Car myCar = new Car();

        // Setting properties of the Car object
        myCar.Brand = "Toyota";
        myCar.Model = "Corolla";

        // Accessing a method of the Car object
        myCar.DisplayInfo(); // Outputs: Car Information: Toyota Corolla
    }
}

```
Building a web application with Next.js and Firebase - Firebase Summit 2021
Tags: podcast, webdev, javascript, beginners
Published: 2023-12-18 07:15:10


## GitHub Repo

In order to clone this application locally run the below command. Please note you will need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)

```bash
git clone https://github.com/CodingCatDev/ccd-starter-nextjs-tailwind-firebase.git

```

## Firebase

Make sure to setup a new project with a Firestore database.

### Install dependencies

```bash
cd backend/firebase && npm install

```

> Make sure you are first in the firebase directory

```bash
firebase deploy

```

The video will cover how the different page types work for firebase.

## Install dependencies

To get started make sure to

```bash
cd frontent/nextjs-tailwind && npm install

```

## Run locally

Make sure to change the `.env.local.template` to `.env.local` and update the parameters from firebase.

To run the dev server (staying in the same directory)

```bash
npm run dev

```
J.A.R.V.I.S Crossed 700+ 🌟 Stars and 160+ Forks on GitHub!
Tags: ai, llm, opensource, python
Published: 2023-12-18 07:08:32


Hello Everyone 👋 , Excited to share that 𝐉.𝐀.𝐑.𝐕.𝐈.𝐒 have crossed more than **700+ ⭐ and 160+ forks on GitHub**. It was the project developed by me during my first year of my college. Being my first project, it remains very special to me, it feels so unreal and wonderful to know work you have done, getting so much love.

![Bot Reading Newspaper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buwaak0bxv22cq3cx1db.jpg)


**What it does...**

-     Dynamic Authentication using Optical Face Recognition
-     Send emails
-     Dynamic News Reporting at any time with api integration
-     Todo list generator, Yes it remembers all!
-     Open any website with just a voice command
-     Plays Music


![Facial Recognition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8apth9cbu1ct9nw92i5.png)

-     Tells time
-     Wikipedia powered AI
-     Dictionary with Intelligent Sensing i.e. auto checking  if spell mistake
-     Weather Report such as temp, wind speed, humidity, weather description


![Optical Character Recognition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epeuo0h10arj970o8bti.jpg)


-     Latitude and longitude
-     YouTube searching
-     Google Map searching
-     YouTube Downloader, download any youtube video by just putting url of video


![Youtube Downloader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/850j7p31x7e18vxhkrl5.png)

-     Now Master can switch b/w J.A.R.V.I.S and F.R.I.D.A.Y, switch to female voice assistant




This shows how great and big open source is. I am working to make it even bigger. Will share some more new features very soon.


Thanks to Everyone who have made their valuable contributions ❤.
Firebase App Check
Tags: podcast, webdev, javascript, beginners
Published: 2023-12-18 07:03:39


## Adding App Check

With just a few lines of code you can include app check into your website

```ts
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

if (import.meta.env.DEV) {
	// @ts-ignore
	self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

initializeAppCheck(app, {
	provider: new ReCaptchaV3Provider('6LdAIqQlAAAAAC4kq-bag4J-HmAAVe_pu7T75QOf'),
	isTokenAutoRefreshEnabled: true
});
```

## Full Repo

You can clone the full repo from [GitHub](https://github.com/CodingCatDev/firebase-app-check).

<section class=" aspect-video">
  <iframe
    title="stackblitz for firebase app check"
    src="https://stackblitz.com/github/CodingCatDev/firebase-app-check?embed=1&file=src/App.svelte"
    frameborder="0"
    height="100%"
    width="100%"
    loading="lazy"
  />
</section>