teleren/devto huggingface dataset:
SvelteKit 1.0 Overview
Tags: webdev, javascript, tooling, html
Published: 2022-12-23 16:00:43

## introduction 
SvelteKit is a framework for building web applications with the popular JavaScript library, Svelte. It was recently released in version 1.0, which represents a major milestone for the project.

# SvelteKit 1.0

One of the key features of SvelteKit is its ability to build server-rendered applications, which can improve performance and SEO compared to traditional client-side rendering. SvelteKit also includes support for automatic code splitting, which means that your application will only load the code that is necessary for the current page, rather than sending the entire codebase to the user's browser. This can help to improve the overall performance of your application.
Another advantage of SvelteKit is its developer experience. It includes a built-in development server, which makes it easy to get started with your project and see your changes in real-time. It also comes with a command-line interface (CLI) that can be used to create new projects, generate code, and perform other common tasks.
In addition to its core features, SvelteKit also includes a number of integrations and plugins that can be used to add functionality to your application. For example, you can use the `@sveltejs/svelte-i18n plugin` to add internationalization support to your app, or the `@sveltejs/sapper-template` plugin to create a server-rendered application with a default layout and routing setup.

## Conclusion 
Overall, SvelteKit is a powerful and user-friendly framework for building web applications with Svelte. If you're looking to create a fast, scalable, and easy-to-maintain web app, SvelteKit is definitely worth considering.
Episode 22/50: Angular Gaming Show, Ryan Carniato learning Angular
Tags: javascript, webdev, angular, programming
Published: 2022-12-23 15:47:08

The SolidJS author Ryan Carniato debated various aspects of the Angular framework with Minko Gechev (product head of Angular). In a lively Angular gaming show, participants asked a plentiful of questions.

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

## Angular Gaming Show

The Angular team did their monthly Angular gaming show on YouTube where everybody could ask questions. Usually, you don't have the feeling that the amount of questions is overwhelming. This time though, it was different.

One of the many takeaways was that the Angular team emphasised that they are working very hard to improve SSR. And they are not alone. They have support from the Aurora team.

The Aurora team is kind of a special task force inside of Google consisting of members of the Chrome team. They work together with different web technologies, frameworks, and help them in different areas.

One of the recent outcomes of the cooperation between the Aurora and the Angular team is the `NgOptimizedImage` directive.

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

## Learning Angular with Ryan Carniato and Minko Gechev

Minko Gechev gave Ryan Carniato a jumpstart into Angular. Minko is the head of product for Angular, and Ryan is the creator of SolidJS, a popular frontend framework.

The recording is quite long. It lasts 4 and a half hours. So if you are short on time, I would recommend to watch the chapters "Reflecting on Angular" and especially "Compiled Output". That's definitely advanced and insightful.

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

## New Releases

### PrimeNg 15

PrimeNg, a UI library, released version 15 with support for Angular 15 and some bug fixes.

[PrimeNg Release Notes 15](https://github.com/primefaces/primeng/blob/master/CHANGELOG.md#1500-2022-12-12)

### Playwright 1.29

Playwright, an E2E testing framework by Microsoft, was published in version 1.29. It has comes with some new, smaller features.

[Playwright Release Notes 1.29](https://github.com/microsoft/playwright/releases/tag/v1.29.0)

### RxJs 7.7 and 7.8

And RxJs had actually with 7.7 and 7.8 two minor releases in one week. Multiple operators support now the type `ObservableInput` which is a union type where the `Observable` is also part of it. But also other types like `ArrayLike`, `PromiseLike` that can be converted to an `Observable`.

[RxJs Release Notes](https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#780-2022-12-15)
How to connect Zoho CRM with Mysql using Python
Tags: mysql, python
Published: 2022-12-23 15:37:03

To connect Zoho CRM with MySQL using Python, you will need to use a MySQL connector library for Python, such as mysql-connector-python. Here is an example of how you can connect to a MySQL database from Python:

```
import mysql.connector

# Connect to the database
cnx = mysql.connector.connect(
    host="hostname",
    user="username",
    password="password",
    database="database"
)

# Create a cursor to execute queries
cursor = cnx.cursor()

# Execute a SELECT query
query = "SELECT * FROM table"
cursor.execute(query)

# Fetch the results of the query
results = cursor.fetchall()

# Iterate through the results and print them
for result in results:
    print(result)

# Close the cursor and connection
cursor.close()
cnx.close()

```

Once you have established a connection to the MySQL database, you can use the MySQL connector library to execute queries, fetch results, and perform other database operations.

To connect to Zoho CRM, you will need to use the Zoho CRM API and make API requests to retrieve or update data in your CRM. You can use the requests library in Python to make HTTP requests to the Zoho CRM API. Here is an example of how you can make a GET request to the Zoho CRM API using Python:

```
import requests

# Set the API endpoint and parameters
endpoint = "https://www.zohoapis.com/crm/v2/Leads"
params = {
    "authtoken": "YOUR_AUTH_TOKEN",
    "scope": "crmapi"
}

# Make the GET request
response = requests.get(endpoint, params=params)

# Print the response
print(response.text)

```

You can use similar code to make POST, PUT, and DELETE requests to the Zoho CRM API to create, update, or delete data in your CRM.

I hope this helps! Let me know if you have any questions.

You can read further on two applications integration using python, You should visit my website [Ajit's Blog](https://ajit.blog/)
Import SVGs as React component and set color in CSS with currentColor
Tags: react, beginners
Published: 2022-12-23 15:33:34

There are two ways to display an SVG graphic on a webpage: by creating an `img` tag that points to the SVG file, or by directly embedding the SVG code in the HTML. The latter method gives you more control over the SVG, and is particularly useful when you want to use CSS to change the color of the SVG. 

To do this, you can use the `currentColor` value in the SVG code, which allows the element to inherit the text color set by CSS. However, this technique only works if the SVG code is part of the DOM.

```xml
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="5" fill="currentColor"/>
</svg>
```

I recently learned that it’s quite easy to embed SVG from a file in your React project.

If you import a SVG file most bundlers will return just a URL to the SVG file.

```jsx
// Import
import svgIcon from './icon.svg'

// Usage in JSX
<img src={svgIcon} alt="Circle" />
```

But you can use [SVGR](https://react-svgr.com/) to get the SVG markup into your DOM. SVGR is installed per default when using CRA, but there are also plugins for other tools.

```jsx
// Import (SVGR has to be installed)
import { ReactComponent as SvgIcon } from './icon.svg'

// Usage in JSX
<SvgIcon />
// Usage with custom class and width
<SvgIcon className="my-class" width="42" />
```

## Vite
While this works out of the box for Create React App projects, you need to install [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) if you are using Vite.

```javascript
// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr(), react()],
};
```

If you are using typescript you might as well need to add the missing types in tsconfig.json:

```json
"compilerOptions": {
  ...
  "types": [
    "vite-plugin-svgr/client"
  ]
}
```

## Gatsby
And you can easily get this to work in Gatsby as well by installing this [SVGR plugin for Gatsby](https://www.gatsbyjs.com/plugins/gatsby-plugin-svgr/).

```bash
npm install @svgr/webpack gatsby-plugin-svgr
```

Then add it to your Gatsby config:

```javascript
// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-svgr',
  ],
}
```
---
That's it, you can now give classes to SVG elements, style them with CSS or use currentColor.

Here is the link to the CRA docs:
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Fetch in JavaScript
Published: 2022-12-23 15:03:38

In JavaScript fetch is a function that fetches or retrieves data, the data that we are fetching comes from the json. To do that you would need to pass in an argument, which would be the path to the resource that you are fetching. After you have successfully returned the data using fetch(), you need to add your promises and that can be achieved by using the then() method. The first promise is going to look like:
.then(response => response.json(_)
. The second promise should contain the data from the json and an example of that would be:
.then(data => console.log(data)) 
. But to be sure that you a grabbing the correct data in the second promise, it's good practice to console.log(). Once the then() method is applied you can make request for data and use them anywhere you want in your code!
Fully Passwordless Authentication with Passage
Tags: webdev, javascript, beginners, podcast
Published: 2022-12-23 14:57:02


Original: https://codingcat.dev/podcast/2-48-Fully-Passwordless-Authentication-with-Passage

{% youtube https://youtu.be/siSIkJ13IuI %}

## Questions

1. Can you tell us more about yourself?
2. Are you now part of the bigger 1Password family? [https://blog.1password.com/1password-acquires-passage/](https://blog.1password.com/1password-acquires-passage/)
3. What is Passage?
4. What makes Passage special? What is unique?
5. Authentication vs Authorization
6. Demo passage
Handling Exceptions In TypeScript
Tags: typescript
Published: 2022-12-23 14:55:36

---
title: Handling Exceptions In TypeScript
published: true
description: JavaScript and TypeScript can throw anything as an error; Error, number, string. So when handling an exception we can't expect a type Error. Here is how to handle the type properly.
tags: TypeScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dplpyp2ebqnfubhlaoer.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-23 14:16 +0000
---

TypeScript is all about type safety. But there are a number of situations that TypeScript can't properly guard against without a little help.

Take Exceptions for example. When we wrap a `try .. catch` around some code to handle a potential exception we probably want to do something like this:
```ts
try {
  await this.userService.all();
} catch (e: Error) {
  this.errorService.handle(e);
}
```

Unfortunately TypeScript won't allow you to do this!

The issue is that in JavaScript (and TypeScript) anything can be thrown as an "error". You can throw any arbitrary type; a `number`, a `string`, even `null`.

This is totally valid JavaScript and TypeScript:
```ts
throw 42;
```

Which means that our `try .. catch` only has two options for the type hint here. `any` or `unknown`.

The `any` type is the escape hatch out of TypeScript's type safety so we generally want to avoid that if we can help it.

So we're left with `unknown`.

The `unknown` type in TS is a way to force users of the type, to narrow the type down to something specific. It's not valid to use something when the type is `unknown` so we're forced to write a Type Guard.

Here is the `try .. catch` from above rewritten to use `unknown`:
```ts
try {
  await this.userService.all();
} catch (e: unknown) {
  if (e instanceof Error) {
    // guaranteed to be an Error now!
    this.errorService.handle(e);
  } else {
    throw Error("Can't handle this error!");
  }
}
```

There is a cleaner way to do this though. What if the `handle` method dealt with the `unknown` type instead?

```ts
class ErrorService {
  handle(e: unknown) {
    let message: string;

    if (e instanceof Error) {
      message = e.message;
    } else if (typeof e === 'string') {
      message = e;
    } else {
      message = "We don't know what the heck happened -- sorry!"
    }

    // handle the error message here
  }
}
```

This way the `try..catch` outside can just pass the `unknown` error through like this:
```ts
try {
  await this.userService.all();
} catch (e: unknown) {
  this.errorService.handle(e);
}
```


---

Like what you read? Want to support me?

A cup of coffee goes a long way 🙏

Why not buy me one? https://ko-fi.com/danjfletcher
Handle Axios Error in Typescript
Published: 2022-12-23 14:53:57

Let's imagine we are calling an API with `axios` within a `try...catch` block to get a list of posts. If the request is successful then we will get the response data, else we will get the error on our `catch` block

```typescript
const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    // Need to handle this error
  }
};

```
But the problem is typescript assumes this `error` object as `unknown` type. So, typescript won't allow us to access any properties inside this `error` object. 
To handle this situation, we can assert the `error` object type like this

```typescript
import axios, {AxiosError} from "axios";

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (e) {
    const error = e as AxiosError;
    // Need to handle this error
  }
};
```
But the assertion is not a good practice and we should avoid doing this. By asserting type you are forcing the typescript to stop doing his work. So this may be problematic sometimes. 

### A Good Solution
We can use [typeguard](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards) to handle this kind of situation and `axios` also provides a `typeguard` for handling errors. Here how it looks like

```typescript
const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log(error.status)
      console.error(error.response);
      // Do something with this error...
    } else {
      console.error(error);
    }
  }
};
```
We can also pass [generic](https://www.typescriptlang.org/docs/handbook/2/generics.html) to type the error `response` and `request` object with this `typeguard`.

```typescript
interface ValidationError {
  message: string;
  errors: Record<string, string[]>
}

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    if (axios.isAxiosError<ValidationError, Record<string, unknown>>(error)) {
      console.log(error.status)
      console.error(error.response);
      // Do something with this error...
    } else {
      console.error(error);
    }
  }
};
```
**N:B:** You can also use this in a `.catch()` method.

To learn about more tips and tricks with typescript, follow me on [LinkedIn](https://www.linkedin.com/in/mostafizurhimself/)
Season's greetings, everyone!
Tags: 3d, css, helloworld
Published: 2022-12-23 15:42:57

---
title: Season's greetings, everyone!
published: true
date: 2022-12-23 14:30:12 UTC
tags: #3d #CSS #HelloWorld
canonical_url: 
---
![A banner with a CSS 3D pumpkin and a caption saying Bo ho ho, merry Christmas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb7xpclfu4cuk08hosbp.png)
# Hello, world.

I'm finally catching up and trying this blogging thing that all the cool kids are doing. Being out of sync with the times seems to be my thing. I'm still using my old Nokia 1616 that I got in 2010. I experimented with the EGA palette decades after it became obsolete and a few years before it was all the rage again in the point&click adventure game community. And up until early 2021 I still used mostly inline-block and floats. It seems like I entered the tutorial hell from the wrong side - and actually went deeper in the wrong direction. And fell...

## ...in love!

CSS and then SVG became my obsession. Doing graphics with just code - resulting in images weighing under 1KB - was a game-changer. But what truly sucked me in was the 3D capabilities of CSS. Instead of learning new languages and frameworks, creating apps and websites, I found joy and happiness in cobbling together complex polyhedra.

That's what I've been at for the past... three years or so. Mostly keeping to myself, going down the rabbithole. But today - much like the Grinch - I decided to poke my head out and say hello. To spread the love of 3D CSS and wish everyone one HELLA merry holiday!

{% codepen https://codepen.io/MackFitz/pen/BaPNyLw %}
Clickhouse - Getting started with Docker
Tags: clickhouse, tutorial, docker
Published: 2022-12-23 14:15:59

[Clickhouse](https://clickhouse.com/) is a popular open-source column-oriented database management system that is designed for fast analytical queries and real-time data processing. It is particularly well-suited for handling large volumes of data and has been used by companies like Yandex, Alibaba, and Uber for their data warehousing and analytics needs.

This is a simple guide to playing with Clickhouse.

### Run clickhouse server
```
docker run -d \
        -v $(realpath ./ch_data):/var/lib/clickhouse/ \
        -v $(realpath ./ch_logs):/var/log/clickhouse-server/ \
        --name some-clickhouse-server --ulimit nofile=262144:262144 clickhouse/clickhouse-server
```
The server should be started after downloading Clickhouse image.

### Start clickhouse client
```
docker run -it --rm --link some-clickhouse-server:clickhouse-server --entrypoint clickhouse-client clickhouse/clickhouse-server --host clickhouse-server
```

This will open a Clickhouse client session, and you can start issuing commands to the Clickhouse server. Let's test the following query:
```
SHOW DATABASES
```
```
SELECT version()
```


### Stop clickhouse server

```
docker stop some-clickhouse-server
```
### Start existing clickhouse server

```
docker start some-clickhouse-server
```
ReductStore Client SDK for JavaScript v1.2.0: New Features and Example Use
Tags: news, node, reductstore, javascript
Published: 2022-12-23 14:06:14


Hello, everyone!

ReductStore has released [v1.2.0](https://github.com/reductstore/reduct-js/releases/tag/v1.2.0) of its
JavaScript SDK. This update includes support
for [ReductStore API version 1.2](https://github.com/reductstore/reductstore/releases/tag/v1.2.0) with the
new `Client.me` method, which allows you to retrieve information about your current API token and its permissions.

The `Client.me` method is a useful addition to the ReductStore JavaScript SDK, and can help you manage and monitor your
access to the platform. Here is an example of how you might use it in your application:

```javascript
const {Client} = require("reduct-js");

const client = new Client("http://127.0.0.1:8383", {apiToken: "my-token"});
const tokenInfo = await client.me();

console.log(tokenInfo.name);
console.log(tokenInfo.permissions.fullAccess);

```

In addition to the new `Client.me` method, this release of the ReductStore JavaScript SDK also includes updates to the
documentation to reflect the recent rebranding of the platform. We hope these updates will enhance your experience with
ReductStore.

if you have any questions or feedback, don't hesitate to reach out in [Discord](https://discord.gg/NQbPeGgzdR)
or by opening a discussion on [GitHub](https://github.com/reductstore/reductstore/discussions).
Scopes
Tags: webdev, beginners, javascript
Published: 2022-12-23 14:02:01

The **_scope_** is the current content of execution that the values and expressions are visible and can be referenced. When a variable is not in the current scope it won't be able to be used. 

There are different kinds of scopes; There is the **_Global_**, **_Local_**, **_Function_** and **_Block scopes_**. 

**_Global scope_** is the default scope where we would have access to the variables anywhere in our code. 

**_Local scope_** is the a characteristic of variables that make them local. This is a variable that it bound to its value within a scope that is not **_Global_**.

**_Function scope_** is a scope created with a function.

**_Block scope_** is a scope created with a pair of curly braces making a "block"._(Block scopes only scope let and const declarations but not var.)_

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


Knowing the different types of scopes can be a helpful tool in debugging. We can be searching our code for why something isn't running and it can be something as simple as having a variable declared in a function scope and then trying to access it globally. It's important to note when starting to code it may be easier to declare certain variables globally when it is known you will use them multiple times in different scopes. 

Globally declared variables you can use as many times as you need all over your code. 


For more detailed information go to MDN:
Scope: [https://developer.mozilla.org/en-US/docs/Glossary/Scope](url)
This Week In Python 🎅
Tags: python, discuss, thisweekinpython
Published: 2022-12-23 14:00:00


**Fri, December 16, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

**I have received some good suggestions for this week's content. Thank you.**

**Did I miss anything from the Python universe this week? What did you read or tried out?**


## Python Articles


- [Boring Python: code quality](https://www.b-list.org/weblog/2022/dec/19/boring-python-code-quality/)
- [Running Python inside ChatGPT](https://mathspp.com/blog/running-python-inside-chatgpt)
- [Multi-Tenancy in Python, FastAPI and SqlAlchemy using Postgres Row Level Security](https://adityamattos.com/multi-tenancy-in-python-fastapi-and-sqlalchemy-using-postgres-row-level-security)
- [Django API Domain Driven Design Style Guide](https://phalt.github.io/django-api-domains/)
- [Effective Python Async like a PRO](https://guicommits.com/effective-python-async-like-a-pro/)


## Projects


- [hedra](https://github.com/scorbettUM/hedra) – Pure Python performance testing framework
- [textual-astview](https://github.com/davep/textual-astview) – A Textual-based Python AST viewing widget library and application
- [bstruct](https://github.com/flxbe/bstruct) – Simple and efficient binary (de)serialization using regular type annotations
- [kglab](https://github.com/DerwenAI/kglab) – an abstraction layer in Python for building knowledge graphs
- [faqtory](https://github.com/willmcgugan/faqtory) – A tool to generate GitHub flavoured FAQ.md documents



**Did I miss anything from the Python universe this week? What did you read or tried out?**
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-12-23 14:00:00

Hey everybody! 👋

Hope y'all are all enjoying yourselves this weekend.

Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Hanging out with old friends🍻

---


![A shot from the Charlie Brown Christmas special... a lotta the kids are hanging out, dancing, and playing music. They're celebrating the holidays!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6let75nv43nify1bsdx2.gif)