teleren/devto huggingface dataset:
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-05-06 13:00:00

Hey y'all 👋

What ya learning on 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.

Hope ya have a nice productive weekend!

![cartoon kitten typing away at a computer... or possibly just "making biscuits" on the keyboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6frrm33mt8sn1pjdw1a.gif)
Websites made by AI?
Tags: ai, discuss, programming, productivity
Published: 2023-05-06 12:23:30

Just a discussion post about the websites made by AI tools.

Does it's really worthy to build a website using AI tools without coding?

The tech influencers all over the platform use to promote various AI websites to build the web page,
Without even trying them itself 🥹
Websites like
10web.io
nocode.mba
Appy pi etc..

I tried one but it was not scalable at all.

So what's your opinion please suggest.

Thankyou
This is my HTML + CSS Design No. 01
Tags: html, css, github
Published: 2023-05-06 12:20:42

I'm pleased to share that **I finished my HTML & CSS Template No. 01 by Osama Elzero** with some of my touches 😊💜

[--> Source code](https://github.com/mohamed-hgag/HTML-And-CSS-Template-01)

[--> Visit the site](https://mohamed-hgag.github.io/HTML-And-CSS-Template-01/)

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84che9osyag1t08cr76n.png)
Angular version upgrade v4 to v12 - part 2: performance
Tags: angular, upgrade, lighthous, performance
Published: 2023-05-06 12:17:45

Angular 업그레이드로 인해 서비스의 성능이 얼만큼 개선되었는지 궁금했다.

크롬에서 제공하는 [lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)라는 툴을 이용해 성능을 비교해봤다.

**[v4]**

![v4 performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33trbgweqi1m5gvdxvsj.png)

**[v12]**

![v12 performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4axl59xc75rzri2vzp1.png)

---

performance의 측정 항목은 아래의 5가지 metric으로 정의된다.
- First Contentful Paint
- Largest Contentful Paint
- Total Blocking Time
- Cumulative Layout Shift
- Speed Index

performance 점수는 33에서 60으로 **약 1.8배 상승**했다.
각 항목에 어떤 변화가 있었는지는 아래 표로 정리해 보았다.

|항목|v4|v12|차이|
|---|---|---|---|
|First Contentful Paint|1.3s|1.8s|+ 38%|
|Largest Contentful Paint|16.4s|4.2s|**- 74%**|
|Total Blocking Time|1,290ms|90ms|**- 93%**|
|Cumulative Layout Shift|0.008|0.007|**- 12%**|
|Speed Index|7.7s|2.4s|**- 68%**|

가장 많은 변화가 있었던 항목은 **Total Blocking Time**과 **Largest Contentful Paint**였다. 

- TBT:
> Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. 
> 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 **사용자 입력으로부터 페이지가 응답하지 못하도록 차단된 총 시간**

- LCP:
> LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users.
> **가장 큰 컨텐츠를 렌더링 하는데 걸리는 시간**

Lighthouse는 검사 조건에 따라 점수의 변동성이 있긴 하지만, 여러번 검사를 실시한 결과 전반적으로 performance가 향상된 것을 확인할 수 있었다.
(4에서 12까지 버전이 확 높아진 만큼, 성능 개선은 당연한 것 일수도..)


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

검사 보고서를 보면, 어떤 부분에서 **더 성능을 향상할 수 있는지 제안**까지 해준다.

성능 최적화를 위해 단순히 프레임 워크 업그레이드에 의존하는 것이 아니라, Lighthouse등 여러 tool등의 도움을 받아 꾸준히 점검하고 시간을 투자해야 한다는 것을 또 깨닫는 경험이었다.

---

Angular12의 feature들 참고:
[관련 링크](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49)
Responsive Footer Design Using HTML & CSS
Tags: html, css, javascript, tutorial
Published: 2023-05-06 12:17:07

Responsive Footer Design Using HTML & CSS

hey everyone hope you all of fine, want to learn how to make responsive footer design using html and css, this video for you.

Inside the tutorial you will learn step by step usage of HTML and CSS3 to design attractive, professional and responsive footer.

inside the footer have four section on each section have different content such as image logo, links, font awesome icon etc.

So, I'm going to teach with you everything from scratch with practically, after watching the complete video tutorial hope you will learn a lot of new things from the video.

{% embed https://www.youtube.com/watch?v=e20ee0UFbRY %}.

hope this tutorial is helpful and beneficial for you.
Special icons for social accounts on GitHub
Tags: github
Published: 2023-05-06 12:12:27

You can have up to 4 social account links on your GitHub profile.

Follow the steps below for the settings.
Your avatar on the top right of GitHub → settings → "Public profile" → "Social accounts"

https://github.blog/changelog/2023-02-02-add-more-social-links-to-your-user-profile/

> You can now add up to 4 links to any social accounts to your user profile, with special support for popular platforms.

It states that it has "special support for popular platforms".
For example, if you register a Twitter URL, the chain icon will replace the Twitter icon.

Specifically, I checked what platforms are supported.
The checking method is simply looking at the HTML source.

If you have any of the following social accounts, I recommend registering them on GitHub (up to 4).

As of 2023-05-06, 9 social accounts seem to be supported.

Added on 2023-10-14: The npm account logo has been added and it seems to be compatible with 10 types of social accounts.

## images

Below are images from social accounts other than twitter.

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

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

![social3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22qklss94jua6b5gjmyz.png)

## twitter

Regex:

```
^https://(?:www\.)?twitter\.com/([^/?]+)/?$
```

Test URL:

```
https://twitter.com/test
```

## facebook

Regex:

```
^https://(?:[^.]+\.)?facebook\.com/(?:[^/?]+/?|profile\.php\?id=\d+)$
```

Test URL:

```
https://facebook.com/test
```

## instagram

Regex:

```
^https://(www\.)?instagram\.com/[^/?]+/?$
```

Test URL:

```
https://instagram.com/test
```

## linkedin

Regex:

```
^https://(?:www\.)?linkedin\.com/(?:in|company)/[^/?]+/?$
```

Test URL:

```
https://linkedin.com/in/test
```

## reddit

Regex:

```
^https://(?:www\.)?reddit\.com/u(?:ser)?/([^/?]+)/?$
```

Test URL:

```
https://reddit.com/u/test
```

## twitch

Regex:

```
^https://(?:www\.)?twitch\.tv/[^/?]+/?$
```

Test URL:

```
https://twitch.tv/test
```

## youtube

Regex:

```
^https://(?:www\.)?youtube\.com/(user|c)/[^/?]+/?$
^https://(?:www\.)?youtube\.com/channel/[a-zA-Z0-9_-]{24}/?$
^https://(?:www\.)?youtube\.com/@[^/?]+/?$
```

Test URL:

```
https://youtube.com/user/test
```

## mastodon

I don't know the specific pattern, but Mastodon seems to be supported.

Test URL:

```
https://mastodon.social/@test
```

## hometown

hometown seems to be a SNS that forked mastodon.

Test URL:

```
https://rage.love/@test
```

I created a test URL from the server list on the following site.

https://github.com/hometown-fork/hometown/wiki/Hometown-servers

The icon looks the same as the mastodon.

## npm

Added on 2023-10-14.

Regex:

```
^https://(?:www\.)?npmjs\.com/~([^/?]+)/?$
```

Test URL:

```
https://npmjs.com/~test
```

![social3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22qklss94jua6b5gjmyz.png)
reCaptcha with React Native, domain?
Tags: reactnative, firebase, javascript, react
Published: 2023-05-06 12:08:44

Hi,
I'm trying to integrate app check to my react native project (backed by firebase) using reCaptcha... Not going so well.
On there site I'm supposed to write domains when register [See the website] https://www.google.com/recaptcha/admin/create
But since I use react native and don't have a domain I don't know what to write. 
Anyone who can help a newbie?? :)
Google vs. ChatGPT: Which Tool Do Developers Prefer and Why? Exploring Perspectives and Insights
Tags: webdev, javascript, programming, devops
Published: 2023-05-06 11:45:58

When it comes to using search engines or development tools, as an AI language model, I have no particular preferences. However, I can offer some developer-specific ideas into how to use Google or ChatGPT for their projects.

The world's most used search engine, Google, has unquestionably been a vital resource for developers for a long time. Google can swiftly give developers the solutions they need to fix coding issues or learn about new technologies thanks to its extensive archive of data and thorough search engines.

However, ChatGPT is a language model that produces natural language text using deep learning. Its skills go beyond those of a search engine because it can be taught to carry out a range of linguistic tasks, like translation, summarization, and text production. This makes it a fantastic tool for developers who need to interact with natural language data, such as chatbots, virtual helpers, or even automated customer support systems.

So, Google or ChatGPT—which is a better tool for developers to use? The solution depends on the project's particular requirements. Google might be the ideal choice if the assignment involves working with plenty of structured data, such databases or APIs. Because Google's search engines are built to cope with structured data, they can quickly give developers results that are pertinent to their query.

ChatGPT would be a preferable option, though, if the project contains natural language processing. For programmers creating conversational interfaces or automated text creation systems, ChatGPT's ability to produce natural language text can be extremely helpful. Additionally, ChatGPT's capacity to comprehend context and deliver more tailored responses may result in more interesting user encounters.

The particular requirements of the project at hand ultimately determine which of Google and ChatGPT should be used. Both tools have advantages and disadvantages, therefore designers must carefully assess their projects' needs before choosing. Developers have a plethora of tools at their disposal to help them succeed, whether it be utilizing Google to search for code snippets or using ChatGPT to build a chatbot.
VS Code Extension for Quick Navigation to Script and Style Tags in a Svelte file
Tags: svelte, vscode, extension
Published: 2023-05-06 10:41:41

---
title: VS Code Extension for Quick Navigation to Script and Style Tags in a Svelte file
published: true
description: 
tags: svelte, Vscode, extension
cover_image: https://user-images.githubusercontent.com/32632542/236613577-0553a995-40ee-45eb-b127-2509dd331f0e.gif
---

## Overview
I created a simple VSCode extension called [svelte-tag-focuser](https://marketplace.visualstudio.com/items?itemName=K-Sato.svelte-tag-focuser).

You can easily jump to the script tag or style tag even when you are working with a very long svelte component.


## Installation

Go to the [installation page](https://marketplace.visualstudio.com/items?itemName=K-Sato.svelte-tag-focuser) and install the extension.

## Usage

Simply open a Svelte file in Visual Studio Code and activate the extension using one of the following methods:

- Focus on script tag: Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (Mac)
  - or Click CMD+Shift+P and type Focus on Script (Svelte)
- Focus on style tag: Ctrl+Shift+T (Windows/Linux) or Cmd+Shift+T (Mac)
  - or Click CMD+Shift+P and type Focus on Style (Svelte)

## Example

Let's say you have the following Svelte file:

```html
<template>
  <div>
    <h1>Welcome to my Svelte app</h1>
    <p>This is some text</p>
  </div>
</template>

<script>
  // This is your script tag
  console.log('This is your script tag');
</script>

<style>
  /* This is your style tag */
  body {
    color: red;
  }
</style>
```

If you want to quickly jump to the script tag, you can use the "Focus on Script" command (or the `Ctrl+Shift+S` key binding) to go directly to the script tag.

That's it for now. Happy coding!
['10','10','10','10','10'].map(parseInt) what&why?
Published: 2023-05-06 10:35:42

the answer is [10, NaN, 2, 3, 4]

['10','10','10','10','10'].map(parseInt) is equal 

['10','10','10','10','10'].map((item, index) => parseInt(item, index)) 

[here is detail about parseInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
Inclusion
Tags: diversityandinclusion, disabilityrights, equality
Published: 2023-05-06 10:28:28

Creating a world that values and embraces the abilities of all individuals is crucial for building a more equitable society. Together, we can create a more inclusive and accessible world for everyone. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zcmjmk0jcihf7q4ny1s.jpg)
Split Larger Serverless Application in to smaller micro-apps
Tags: somod, serverless, aws, javascript
Published: 2023-05-06 10:27:07

Serverless applications are great because they remove the burden of maintaining the server, thus allowing developers and startups to focus on code instead of infrastructure. But what happens when the serverless application grow bigger? This article describes the strategies to maintain larger serverless applications.

> This article is about AWS SAM Applications. Terraform has modules to handle this use case. For other serverless platforms, let us discuss them in the comments

**1. Nested Applications**
Using the [AWS::Serverless::Application](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-resource-application.html), one can create a giant serverless application by combining the smaller applications recursively. 

- PROS
  - Native Support by AWS SAM.
  - Share applications using a file-system share or AWS Managed [SAM Repository](https://aws.amazon.com/serverless/serverlessrepo/).
  - Deploy and Test the nested application independently.
- CONS
  - Parameter passing between nested applications is difficult to manage.
  - Common dependencies create duplicate resources. For example, if applications **A** and **B** include application **X**, another application using both **A** and **B** will have two instances of **X**.
  - Extending an application is not possible. For example, application **A** which includes application **B** can not update the properties of a resource in application **B**.

**2. Using SOMOD**
With SOMOD(Serverless Optimized MODules) framework, create Serverless applications in smaller chunks and merge them to form bigger solutions on multiple levels.

- PROS
  - Each Module is an NPM Package giving the inbuilt feature to manage the dependencies.
  - Easy Parameter management. 
  - No Duplicate resources.
  - Can update only selected resources from dependency modules.
  - Extendable framework
- CONS
  - Need NPM as package/dependency manager.
  - Some extra conventions to learn (easy learning curve)

[Getting Started with SOMOD](https://docs.somod.dev/getting-started) section in the SOMOD documentation has a step-by-step guide to work with SOMOD.
Sharing configs between Storybook and Vite
Tags: vite, storybook, config
Published: 2023-05-08 07:08:34

---
title: Sharing configs between Storybook and Vite
published: true
date: 2023-05-06 09:54:17 UTC
tags: vite,storybook,config
canonical_url: https://krzysztofzuraw.com/blog/2023/storybook-vite-config/
---

I have a project that is using Vite.js as a bundler with Storybook to have visual testing of components. I recently updated Storybook from version 5 to 7. Here are a couple of things I had to do to make it work.

Firstly you have to know that Storybook in version 7 will merge project `vite.config.js` to its own. What does it mean? It means that all your plugins will work out of the box with Storybook but on the other hand, you need to make sure that your paths in `vite.config.js` are correct. By correct I mean they should be absolute, not relative. Why? Let's say that you have your vite plugin configured to look for `index.tsx` file like this: `entry: "./index.tsx"` - it will work in your project but not in Storybook. It won't work because Storybook will look for `index.tsx` from its directory (by default in the `.storybook` folder), not from the root of your project. So you have to make sure that your paths are absolute. How to do this? You can use the `path` module from Node.js. Here is an example:

```js
import { resolve } from "path";

export default defineConfig({
  plugins: [
    viteHtml({
      entry: resolve(__dirname, "index.tsx"),
    }),
  ],
});
```

Another issue that I found is that not all plugins will work with Storybook. For example, `@vitejs/plugin-react-swc` will not work with Storybook 7 - you can see the GitHub issue for [details](https://github.com/storybookjs/storybook/issues/22381). What you can do to fix this? You can use the solution provided in the issue and remove the plugin from the config when running Storybook. Here is a code example:

```js
import react from "@vitejs/plugin-react";
import { withoutVitePlugins } from "@storybook/builder-vite";

const config = {
  // the rest of the config
  async viteFinal(config) {
    config.plugins = await withoutVitePlugins(config.plugins, [
      "vite:react-swc",
    ]);

    return mergeConfig(config, {
      plugins: [react()],
    });
  },
};
```

Other than those two issues migrating to Storybook 7 was quite nice. Storybook has even a nice codemod to migrate from `storiesOf` to the new CSF [format](https://storybook.js.org/docs/react/migration-guide#storiesof-to-csf). That is all for today and I hope this will help you to migrate your project to Storybook 7.
¿Se bloqueará OpenAI en la UE?
Tags: ai, chatgpt, productivity, news
Published: 2023-05-06 09:53:55


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbp0nxdhx485zax5e9ge.png)
Italia ha bloqueado el uso de ChatGPT, una herramienta de inteligencia artificial, por no respetar la legislación sobre protección de datos y acceso de menores a contenidos.

Aunque esta medida solo afecta a las empresas italianas, se teme que pueda limitar su acceso a tecnologías que impulsen su crecimiento y competitividad en el mercado global en el futuro.

Algunos expertos creen que los gobiernos deberían incentivar el uso de tecnologías innovadoras en los procesos de producción en lugar de obstaculizar la innovación, y colaborar para crear marcos reguladores que permitan el avance de la inteligencia artificial de forma responsable y segura.

Pero eso no es todo.

Otros países de la UE también han anunciado que creen que OpenAI incumple la normativa comunitaria en materia de protección de datos.

¿Es esto cierto? No lo sé, tampoco me importa, todo el mundo tiene que ser consciente de los datos que comparte. ¿No es un poco absurdo que nos protejan de algo que ya conocemos y elegimos utilizar? ¿Nos están protegiendo de nosotros mismos?
Por ejemplo Alemania y España han anunciado que creen que OpenAI no cumple con la normativa europea, al igual que dijo el estado italiano.
¿Bloquearán Alemania y España el acceso a OpenAI?

Al menos podría haber [una solución para saltarse el bloqueo](https://makiai.com/como-acceder-a-openai-desde-un-pais-bloqueado/), pero aún así, esperemos que no ocurra, ya que no todo el mundo podrá saltarse la restricción legalmente, especialmente las empresas.

¿Cuál podría ser el coste económico de no tener acceso a la herramienta de IA más avanzada del mundo disponible comercialmente? Mejor no pensarlo.
This week’s newsletter is out! (06-05-2023) - Mindblown Everything
Tags: javascript, tech, webdev, discuss
Published: 2023-05-06 09:30:43

---
title: This week’s newsletter is out! (06-05-2023) - Mindblown Everything
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Mindblown Everything

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

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Introducing Climatology
Tags: githubhack23
Published: 2023-05-06 09:20:17

### What I built
Essentially I built a search engine of climate data for over 120,000 locations. 

### Category Submission:
Due to the sheer amount of people NOT using this, this would definitely qualify as a Wacky Wildcard project. 

### App Link
[Live Demo](https://climatology.vercel.app/)

### Screenshots
I have no good screenshots but I hope a video would suffice. 

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

### Description
Climatology is a web app that provides comprehensive climate and weather data for over 120,000 locations around the world with a population of over 1,000. The app features three main sections: Climate, Monthly Averages, and Basic Forecast.

### Link to Source Code
[GitHub Repository](https://github.com/YourUsername/Climatology)

### Permissive License
[MIT License](https://choosealicense.com/licenses/mit/)

### Background
The fascination with cold weather inspired me to build an app that simulates how weather patterns can affect an area. My goal was to create a catalog of meteorological information for every location in the world that has a population over 1,000, providing users with an alternative to other weather apps on the market.

### How I built it
I built Climatology using Next.js, MongoDB, Python, and R for data processing. GitHub Actions and Codespaces played a significant role in streamlining the development process, allowing me to test design ideas and REST APIs quickly.

During the development process, I learned a great deal about Next.js, MongoDB, using Postman for API testing, and scientific computing. I also improved my skills in handling Git version control and working with geolocation features.

### Additional Resources/Info
For more detailed information about the development process and the journey I took to create Climatology, you can read my 4-part blog series describing the project's conception and final product.