teleren/devto huggingface dataset:
Performance Optimization in React
Published: 2023-02-25 18:25:03

React is a JavaScript library for building web applications, but as your app grows in size and complexity, it can become slow and sluggish. In this article, we'll look at some tips and techniques for optimizing the performance of your React app, so that it runs faster and smoother.

1-Memoize Your Components:
Memoization is a technique that allows you to cache the results of a function, so that it doesn't have to be re-calculated every time it's called. In React, you can use the React.memo() function to memoize your components, which can significantly improve performance. React.memo() works by comparing the props of a component to its previous props, and only re-rendering if they've changed.

2-Lazy Load Your Components:
Lazy loading is a technique that allows you to defer the loading of certain components until they're actually needed. This can improve performance by reducing the amount of initial code that needs to be loaded. React provides a React.lazy() function that allows you to lazily load components that are wrapped in a dynamic import.

3-Use Code Splitting:
Code splitting is a technique that allows you to split your code into smaller, more manageable chunks that can be loaded on demand. This can improve performance by reducing the amount of code that needs to be loaded initially. React provides a React.lazy() function that allows you to split your code into chunks that are loaded on demand.

4-Avoid Re-Rendering Unchanged Components:
When a component re-renders, it can be expensive in terms of performance. To avoid unnecessary re-renders, you can use the shouldComponentUpdate() lifecycle method to determine whether a component needs to be re-rendered. Alternatively, you can use the PureComponent class, which automatically implements a shouldComponentUpdate() check based on a shallow comparison of the component's props and state.

5-Use React Profiler:
React Profiler is a tool built into React that allows you to analyze the performance of your app. You can use it to identify which components are causing performance issues and to optimize your code accordingly. To use React Profiler, simply add the <Profiler> component to your app and pass in a callback function that records the performance metrics.

Conclusion:
By using these tips and techniques, you can significantly improve the performance of your React app. Whether you're memoizing your components, lazy loading your code, or using the React Profiler to identify performance bottlenecks, there are many ways to optimize your app and make it run faster and smoother.
go:generate 101
Tags: go, github, metaprogram, beginners
Published: 2023-02-25 18:22:28

How to use `go:generate`?

[support code](https://github.com/didof/go-generate/tree/main/101)

## Setup

`terminal`
```bash
go mod init github.com/<username>/<reponame>
```

Create two files. `main.go` will use `gen.go` as generator.

`terminal`
```bash
touch main.go gen.go
```

`main.go` simply logs "World!" and runs the generator via the special comment.

_main.go_
```go
package main

//go:generate go run gen.go

import "fmt"

func init() {
	fmt.Println("main.go#main.init")
}

func main() {
	fmt.Println("World!")
}

```

> NOTE: There is no space between the slashes and `go:generate`.

> NOTE: not only `gen.go`, but `go run gen.go`.

`gen.go` declares `package main`, which would be forbidden were it not for the special comment.

_gen.go_
```go
//go:build ignore

package main

import "fmt"

func init() {
	fmt.Println("gen.go#main.init")
}

func main() {
	fmt.Println("Hello")
}

```

> NOTE: There is not space between the slashes and `go:build`.

## Usage

`terminal`
```bash
go generate ./...
```

`Output`
```output
gen.go#main.init
Hello
```

`terminal`
```bash
go run .
```

`terminal`
```output
main.go#main.init
World!
```

*Although the subcommand name is `generate`, the **generator** need not generate a file.*

# References
- [support code](https://github.com/didof/go-generate/tree/main/101)
Boost Your Productivity with These 10 Google Chrome Extensions
Tags: data, chrome, google, extensions
Published: 2023-02-25 18:21:18

1. [Scribe](https://scribehow.com/) 
Allows you to turn any process into a step-by-step guide, instantly.

2. [Hyperwriteai](https://hyperwriteai.com/) 
Generates content and provide suggestions as you write. It's advanced AI algorithms help you write better and faster.

3. [Hugo](https://lnkd.in/eYgAMzVZ) 
Be prepared for meetings and drive outcomes, with notes and tasks that connect to your calendar and work apps

4. [Save to Google Drive](https://lnkd.in/egp5hP9T) 
Using this Google Chrome extension, you can save video, HTML5 audio, images, and documents by just selecting and right-clicking 'Save to Google Drive.

5. [Momentum](https://momentumdash.com/) 
Transform your New Tab page into a focused, productive, and inspiring dashboard.

6. [Briskine](https://www.briskine.com/) 
Provides a template that enables you to write emails faster. With this template, you'll fill in specific customer details and send emails in a flash.

7. [BlockSite](https://blocksite.co/) 
Remove distracting apps and sites and stay focused. Key features: Custom blocklist, Scheduled site blocking and Password protection

8. [Just Read](https://lnkd.in/e9vaSFk4) 
Customizable reader extension that allows you to read an article in a simplified format, like a read mode but better.

9. [Forest](https://www.forestapp.cc/) 
Helps you reduce procrastination by setting blocks of time where you work on your to-do list without getting distracted

10. [Toby](https://www.gettoby.com/) 
Organize your browser tabs into Toby so you can access key resources in one click.

Also, if you have any suggestions or feedback to improve this roadmap, feel free to let me know. Let’s connect on [LinkedIn](https://www.linkedin.com/in/mahadevkarekar/).
Hello World in Golang
Tags: go
Published: 2023-02-25 18:05:11

-  First add the package **main** in your program:

```
package main
```
`Every Go file must start with a package name statement. Packages provide code encapsulation and reuse. The name of the package here is main.`

- After adding main package import **“fmt”** package in your program:

```
import(
"fmt"
)
```

`Import the fmt package, which will be used to print text to the standard output in the main function.`

- Now write the code in the main function to print hello world in Go language:

```
func main() {  
    fmt.Println("Hello World") 
}
```

**func main():** 

> 
`The main function is a special function that is the entry point of a Go program. The main function must be included in the main package. { and } denote the start and end of the main function.`

**fmt.Println(“Hello World”):** 

> 
`The Println function in the fmt package is used to print text to standard output.`
Create multiple Angular apps in one Angular app
Tags: angular
Published: 2023-02-25 18:01:20

Command to generate new new app in current app

```
ng generate application app-name
```

To create multiple apps in one with clean structure

- First new app with below command line

```
ng new app-name --create-application=false
```

- Next create one more app in above app with this command

```
ng generate application app-name
```
can you tell me what is the error in this code ?
Tags: beginners, help, programming
Published: 2023-02-25 17:53:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf4khawtkpfdcri7dugh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4q8a2ejw6d365b6rc0c.png)
Turning 14...
Published: 2023-02-25 17:41:02

I'm turning 14 tomorrow, so in celebration of that, I finished creating my portfolio in Next.js!

Portfolio Changes:
- Changed my portfolio from Flask to Next.js 
- Removed the newsletter section
- Added a skills page

---

In the last year I have learnt how to:
- Make simple apps with Swift
- Make VR Games with AFrame
- Use the Spotify API and GeniusLyric API to get songs and song lyrics
- Use the Gmail API to get recent emails
- Code in JavaScript with ease
- Play notes with Python
- Make games with Kaboom.js
- Make websites with Express.js
- And many more things

---

Thanks for supporting my journey over the year!
Check out my portfolio [here](https://vulcanwm.is-a.dev)
Ruby as I know it
Tags: ruby, rails, developerhappiness
Published: 2023-02-25 17:33:15

Programming languages are many,
But none are as lovely as Ruby.

While some prioritize the machine,
It's only Ruby who cares for me like a Queen.

Born in the land of Haiku,
Ruby's elegance is meant for all to pursue.

With more art than science, _why showed us how it wasn't stiff,
With sane defaults, David paved the way for lesser diffs.

Ryan's casts lured us with a spell,
Jose's contributions will forever be swell.

Yehuda made us bundled our gems with ease,
Then went on to make cargo and yarn so packages aren't mean.

As Linus once said, "The Ruby people, strange people,"
To which I say, Yes Yes Yes as we are not feeble or sheeple.

Ruby's not just a language by chance,
It's a labor of love and elegance,
By our beloved Matz, who gave Ruby its very first dance.
Cheap way to host a Javascript project. (e.g. Node APIs & React Apps)
Tags: devops, javascript, webdev, react
Published: 2023-02-25 17:32:24

With the announcement of the removal of the free tier on Heroku, I, like many others was scrambling for an alternative.

Heroku used to offer free 'Dynos' but now are offering dynos for $7 which are always active or $5 for eco-dynos which go inactive after 30 minutes. 

So what are some good alternatives?

I currently use these services and have done for the last 8 months or so. These are great services and are either the same or cheaper.

## Digital Ocean
One option I chose for a Node API and React app was using Digital Ocean. I have been using this for the last 8 months and I found it very easy to setup. See my article on setting up an API on digital ocean. 

The cost is $5 for a droplet and with the link below you can get a **free $200 credit** when you sign up to get started [https://m.do.co/c/b6731a07428c](https://m.do.co/c/b6731a07428c).

{% embed 
https://dev.to/lukeecart/how-to-deploy-a-nodejs-app-to-digital-ocean-using-docker-al6 %}
This is actually *better* value than Heroku because these Droplets don't become inactive after 30 mins and remain active like the Heroku $7 dynos.


## AWS S3 
Another way I have used is hosting a React app on AWS S3. 
A React app is a static page when running 'npm run build' because the file is 1 html file with a minified JavaScript file. These files can be stored on a public S3 bucket.

This **costs me a few pennies per month** to host the static files. 
I used these 2 resources to automatically run build and push to S3 everytime I push my code to GitHub. This uses a GitHub action and a S3 bucket.

{% youtube 7djMZ5OTG_E %}

- GitHub actions [https://github.com/jakejarvis/s3-sync-action](https://github.com/jakejarvis/s3-sync-action)

**Note: this contains a referral link but I have used this service for 8 months now and I have found it very helpful and good.**


I hope these resources will be of a help to someone. Please share your thoughts below and with others if you think they will find it helpful
Street Programmer: Metaphor Blog Sharing
Tags: showdev, webdev, programming, opensource
Published: 2023-02-25 17:30:55

Announcements 🎉 

[Street Community Programmer (SCP)](https://github.com/StreetCommunityProgrammer) has been launch [Metaphor Website](https://streetcommunityprogrammer.github.io/metaphore/) (Beta Version).

We build a static website as a means of sharing solutions from the experiences of punk members.

The content displayed on our static website comes from issues created by contributors/members. And we convert it into a post for our website based on various categories derived from the labels in the issue.

There are several forms for creating issues (post forms) to automate post labels and formats.

When an issue is closed, we will automatically convert the issue into a post/content for the website.

{% github https://github.com/StreetCommunityProgrammer/metaphore %}
Introduction to PWAs (Progressive Web Apps)
Published: 2023-06-12 17:15:13

---
title: Introduction to PWAs (Progressive Web Apps)
published: true
date: 2023-02-25 17:08:38 UTC
tags: 
canonical_url: 
---

Progressive Web Apps (PWAs) are a new way of delivering web content that combines the best of both worlds - the ease of use of native apps and the accessibility of traditional websites. PWAs are designed to provide users with a fast and seamless experience, even on slow networks or when offline.

To get started with PWAs, it's important to understand the key features that make them different from traditional websites. Some of these features include:

- Offline support: PWAs can work offline or with limited connectivity, providing users with a seamless experience even when their internet connection is poor.

- Home screen icons: PWAs can be installed on a user's device and accessed just like a native app, with a dedicated icon on their home screen.

- Push notifications: PWAs can send push notifications to users, even when the app is not currently open.

So, how do you build a PWA? It starts with creating a web app that meets certain technical requirements, such as having a service worker, a web manifest file, and HTTPS. From there, you can enhance your PWA with features like offline support, push notifications, and a home screen icon.

Here's a code example of a basic service worker in JavaScript:

```
// Register a service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

```

In this example, we're using the `navigator` object to check if the `serviceWorker` API is supported in the user's browser. If it is, we use the `window.addEventListener` method to wait for the page to load and then call `navigator.serviceWorker.register` to register our service worker file (`/sw.js`).

This is just a basic introduction to PWAs, but there's a lot more to learn and explore in this exciting area of web development. Whether you're building a new web app or looking to enhance an existing one, PWAs are a great way to provide users with a fast and seamless experience.

Here's a great starter for you to remix: [~easy-pwa](https://glitch.com/edit/#!/easy-pwa?path=README.md%3A12%3A20) on Glitch

# 👋
SVG & Javascript, the Perfect Couple
Tags: svg, javascript, design, html
Published: 2023-02-25 16:03:54

SVG has found a great ally in JavaScript because JavaScript is a powerful programming language that can manipulate SVG images dynamically in real-time. Here are some reasons why SVG and JavaScript are a great match.


![SVG and Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrurz188xwftpstbu5zh.png)

you can modify an SVG <path> object in JavaScript using the setAttribute() method or by directly manipulating the path element's d attribute.

In this example, we first get the SVG <path> element using its id attribute. We then use the setAttribute() method to modify the d attribute to create a new path that starts at (10, 10), goes to (50, 50), and ends at (90, 10).



**SVG & Javascript**

**Interactivity:** JavaScript can be used to add interactivity to SVG images, making them more engaging and dynamic. For example, JavaScript can be used to create hover effects, animations, and other interactive elements that respond to user input.

**Accessibility:** JavaScript can be used to make SVG images more accessible to users with disabilities, such as by adding alternative text descriptions or keyboard accessibility.

**Dynamism:** JavaScript can be used to dynamically generate or modify SVG images based on user input or other data sources. This can be useful for creating data visualizations, maps, or other types of dynamic graphics.

**Compatibility:** SVG images and JavaScript are both widely supported by modern web browsers, making them a reliable and cross-platform option for creating interactive graphics on the web.

**Flexibility:** JavaScript can be used with a wide range of SVG editing and animation libraries, such as D3.js, Snap.svg, and Greensock, allowing developers to choose the tools that best fit their needs and preferences.


SVG and JavaScript provides a powerful and versatile toolkit for creating dynamic and interactive graphics on the web.
Commitar ou não commitar o package-lock.json?
Published: 2023-02-25 15:44:12


![Commitar ou não commitar?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdw8w79qbg0ga8kc8qt3.jpg)



### Versão resumida:

1. Sim, você deve commitar
1. Sempre faça o commit do arquivo quando ele for alterado
1. Nunca delete o package-lock.json e nem coloque ele no .gitignore
1. O mesmo vale para o yarn.lock


## Contexto
Ainda hoje eu vejo muita gente discutindo sobre porque não commitar o package-lock. Rola um misticismo danado em cima desse arquivo tão útil e hoje vamos entender se vale a pena ou usar.

## Os problemas

Tem sido cada vez mais raro, mas ainda acontece: aquela dependência que você adicionou no package.json e colocou a versão com um circunflexo (Ex.: `"typescript": "^4.0.0"`) atualizou pra versão 4.9 e sua aplicação começou a quebrar. 

Isso acontece porque você permitiu o update da major pra essa dependência, permitindo a atualização de novas features. O problema é que um código que o desenvolvedor considera como feature, pode se tornar uma breaking change pra você.

Daí você pode ser malandro e tirar o circunflexo pra travar a versão, mas você sabia que a dependência da sua dependência também pode ter o tal circunflexo?

Outro caso acontece quando você desenvolve a sua feature, commita o seu código, e na hora do CI o build vai lá e quebra, mas local ele roda normalmente.

Ou pior, a versão de produção começa a apresentar um bug estranho que só acontece em produção, e depois de horas investigando você descobre que é a versão da lib que tá diferente.

![Na minha máquina funciona](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjovxkl1fxlehtegea7b.jpg)

## A solução: package-lock.json

Todos esses problemas poderiam ter sido evitados com o package-lock.json. O lock, como seu próprio nome diz, é uma espécie de trava que descreve toda a árvore de dependências geradas pelo `npm install` e garante que todas as pessoas do projeto, incluindo o seu CI, vão instalar as mesmas dependências e suas respectivas versões.

Como cada commit tem seu snapshot do package-lock, você consegue voltar pra uma versão anterior da aplicação e reinstalar toda a árvore de dependências que funcionava quando o snapshot foi criado.

O package-lock.json também indica quando uma dependência foi atualizada, te dando uma ótima visibilidade da árvore de dependências do seu projeto.

## Pra galera do yarn: yarn.lock

E se você usa o yarn, isso também vale pra você. O yarn.lock tem a mesma funcionalidade do package-lock.json e também deve ser versionado.
Can Neural Networks be trained to generate SVG images?
Tags: svg, javascript, design, html
Published: 2023-02-25 15:01:17

Yes, neural networks can be trained to generate SVG images. Neural networks have been used for a variety of image generation tasks, including generating vector graphics like SVG images.

Vector Graphics and SVG. In contrast to Raster graphics, where the content is represented by a rectangular grid of pixels, Vector graphics employs in essence mathematical formulas to encode different shapes. Importantly, this allows vector graphics to be scaled without any aliasing or loss in detail. Scalable Vector Graphics (SVG) is an XML-based format for vector graphics [24]. In its simplest form, an SVG image is built up hierarchically as a set of shapes, called paths. A path is itself defined as a sequence of specific draw-commands that constitute a closed or open curve.


![Neural Networks trained to generate SVG images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujz8n9ngwez4evduitnk.png)

[PDF File](https://arxiv.org/pdf/2007.11301.pdf)

One popular approach to generating SVG images using neural networks is to use a type of neural network called a Generative Adversarial Network (GAN). In this approach, the GAN is trained on a dataset of existing SVG images, learning to generate new images that are similar to the ones in the dataset.

Another approach is to use a Variational Autoencoder (VAE) to generate SVG images. A VAE is a type of neural network that learns to encode input data into a lower-dimensional latent space, and then decode the latent representation back into an output. In the case of SVG image generation, the VAE can be trained to encode existing SVG images into a lower-dimensional latent space, and then generate new SVG images by decoding random samples from this latent space.

There are also several pre-trained neural networks that can generate SVG images, such as the Sketch-RNN model. Sketch-RNN is a neural network that can generate simple line drawings in SVG format based on user input.



Overall, while generating SVG images using neural networks is still an active area of research, there is promising progress being made in this field.