teleren/devto huggingface dataset:
2 simple ways to call an action on state change
Tags: react, useeffect, fetch
Published: 2022-01-10 03:29:50

---
title: 2 simple ways to call an action on state change
published: true
description: Using useEffect or simply calling the function
tags: reactjs, useeffect, fetch
cover_image: https://marcosrjjunior.com/images/og/2-simple-ways-to-call-an-action-on-state-change.png
---


## Scenario

I would like to refresh the list of available states based on the selected country.


![Example](https://marcosrjjunior.com/_next/image?url=%2Fimages%2Fposts%2F2-simple-ways-to-call-an-action-on-state-change%2Fexample.png&w=384&q=100)


## 1. useEffect

One of the parameters of this function is the array of values that works as a listener.

```tsx
useEffect(() => {
  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}, [selectedCountry])
```

The useEffect will be performed only on the first render and when the value of selectedCountry changes.

It is a great place for this scenario, you have just to be careful to not using it much and lost control of the requests. Checking the network tab is a great place to see if you are not calling a request multiple times.

## 2. Simply calling a function

I feel comfortable using this simple approach because I know exactly who is triggering the action

```tsx
const onCountryChange = e => {
  const selectedCountry = event.target.value

  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}

return (
  <select onChange={onCountryChange}>
    <option value="AU">Australia</option>
    <option value="...">...</option>
  </select>
)
```

----


Which one do you prefer?
Detect Marak Squires packages with NodeSecure
Tags: javascript, node, security
Published: 2022-01-10 03:28:42

Hello 👋

I'm writing this article quickly for all the developers who would like to detect 🚩 Marak dependencies in their project to secure themselves.

I made the decision to take a stand based on the impact of Marak's latest publications (which don't seem to be stopping anytime soon 😰).

[NodeSecure](https://github.com/ES-Community/nsecure) can now detect packages created by Marak and it will generate a global warning ⚠️.

CLI:
![NodeSecure CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2r35010mxnqj7iwbn6l.png)

In the UI (top right corner):
![NodeSecure UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjkfxglkoskt36fmszw3.png)

## What is NodeSecure ?

Read more about our tools and organization [here](https://github.com/NodeSecure).

Our main tool is a CLI/API that will fetch and deeply analyze the dependency tree of a given npm package (Or a local project with a package.json) and output a .json file that will contains all metadata and flags about each packages. All this data will **allow to quickly identify different issues across projects and packages** (related to security and quality).

## How to use ?

```
$ npm install @nodesecure/cli -g

# Scan an npm package and open it in the WebUI
$ nsecure auto express

# Omit the package name to scan a local project
$ nsecure auto
```

Complete CLI documentation [here](https://github.com/ES-Community/nsecure#-usage-example).

---

Hoping that this will help.

Best Regards,
Thomas
How To Create Dynamic Pie Chart In Laravel 8
Tags: laravel, laravel8, piechart, chart
Published: 2022-01-10 03:17:53

Hello Friends, In this tutorial I will show you how to create dynamic pie chart in laravel 8, Pie charts are use to representing data in graphics view, for creation of dynamic pie chart in laravel 8 example you need to create model, controller, route, blade file and database.

In laravel 8 dynamic pie chart we need some basic js file like, echarts.min.js and some other js and css file.

So, let's see how to create dynamic pie chart in laravel 8.

```
Step 1 : Install Laravel 8 for Dynamic Pie Chart Example

Step 2 : Create Model and Migration for Pie Chart Example in Laravel 8

Step 3 : Add Route in web.php file

Step 4 : Create Controller

Step 5 : Create Blade File
```

And you will get output like below image.

![How To Create Dynamic Pie Chart In Laravel 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayut0dcby0e4medox247.png)

---

> **_[Read More : How To Create Dynamic Pie Chart In Laravel 8](https://techsolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel-8)_**
Wit-Ecogreen - Tăng cường thị lực
Published: 2022-01-10 03:11:41

Wit-Ecogreen.com.vn là trang thông tin toàn diện và đầy đủ nhất về các bệnh lý của mắt (bao gồm đục thủy tinh thể, thoái hóa võng mạc, vẩn đục dịch kính, thoái hóa điểm vàng, cận thị, khô mắt, glocom, nhiễm trùng mắt, …), kèm theo đó là các phương pháp khắc phục, chế độ ăn uống cùng lối sống sinh hoạt luyện tập phù hợp hỗ trợ tăng cường thị lực và nâng cao hiệu quả điều trị bệnh.
Tất cả những thông tin trong bài viết của Wit-Ecogreen đều được các Cố Vấn chuyên môn giàu kinh nghiệm tuyển chọn kỹ lưỡng nội dung từ các trang web uy tín trong nước và quốc tế như Anh, Mỹ, Pháp, Úc, Nhật Bản… và qua tham vấn y khoa từ đội ngũ bác sĩ, chuyên gia y tế và chuyên gia nhãn khoa hàng đầu tại Việt Nam.
Ban cố vấn chuyên môn của Wit-Ecogreen.com.vn:
GS.TS Đỗ Như Hơn - Với danh hiệu cao quý Thầy Thuốc Nhân Dân được nhà nước trao tặng, GS.TS Đỗ Như Hơn với kinh nghiệm làm việc hơn 40 năm đã đóng góp thành tựu quan trọng trong việc nghiên cứu, chữa trị về mắt cùng các công trình nghiên cứu cấp quốc gia có vai trò thực tiễn trong điều trị tại Việt Nam
Wit-Ecogreen cung cấp [thuốc bổ mắt](https://wit-ecogreen.com.vn/cham-soc-mat/thuoc-bo-mat-c4a195.html) WIT với tinh chất quý BROCCOPHANE từ thiên nhiên giúp gia tăng THIOREDOXIN, bảo vệ nuôi dưỡng Võng Mạc và Thủy Tinh Thể từ bên trong, hỗ trợ Tăng Cường Thị Lực, Giảm Mờ, Mỏi Mắt.
Công dụng sản phẩm công bố theo giấy phép SĐK: 2616/2019/ĐKSP Xem thêm tại Wit-Ecogreen : 
Địa chỉ TPHCM: 148 Hoàng Hoa Thám, phường 12, quận Tân Bình, TP.Hồ Chí Minh 
Điện thoại: (84 28) 62936629 - 62936630 
Email: tuvanykhoa@wit-ecogreen.com.vn 
Website: [https://wit-ecogreen.com.vn/ ](https://wit-ecogreen.com.vn/ )
Sản phẩm Wit: https://wit-ecogreen.com.vn/wit.html #wit-ecogreen #wit #witbomat
Soundcloud to mp3
Tags: music, mobile, motivation, beginners
Published: 2022-01-10 01:57:55

Soundcloud was founded as a platform to connect music aficionados in response to the growing demand for online music listening and the promotion of music items among consumers. In 2007, Soundcloud opened its doors in Berlin, Germany, and has since risen to the top of the world's music streaming services rankings. The company's success has had a significant impact on the music industry, as well as the careers of the artists who have used the Soundcloud platform to achieve the level of success they have today.
You may convert and download music from SoundCloud in the high-quality MP3 format with the [Soundcloud To Mp3](https://soundcloud-tomp3.com) application.
Fast music download speeds together with high-quality music listening experiences are provided by the free SoundCloud downloader and MP3 converter. Listen to music without being interrupted by spam advertisements
The product is compatible with all major devices and operating systems.
The site requires no login or registration, and it is quite user-friendly.
PostCSS: Processor and Plugin module
Tags: postcss, underthehood, sourcecode
Published: 2022-01-10 01:44:21

---
series: Reverse Engineer PostCSS
title: PostCSS: Processor and Plugin module
tags: postcss, underthehood, sourcecode
published: true
---
# Table of contents
  * [Processor](#proc)
  * [LazyResult](#lazy-result)
  * [Result](#result)
  * [Plugins](#plugin)
  * [Warning](#warning)
  * [Other Entities](#entity)

## Processor <a name="proc"></a>
Creates a `Processor` instance. This instance can be used on multiple Stylesheets. `postcss` default export function returns a `Processor` instance. The main purpose of this module is to process the plugins, which is called `Normalization` here, add to the `plugins` data member for storage and return a `LazyResult` promise.

### Data members
#### plugins - `Array<Plugin|Transformer|TransformCallback>`
stores a list of plugins added to this `Processor` instance.

### Methods

#### use
takes in a plugin to append to the list of plugins and returns instance of `Processor`.

#### process
Parses CSS (can be passed in as various types) to return `LazyResult` promise.

#### normalize
Takes in `Array< plugin >` are argument. For each of the plugin, the following steps are done:
- Normalization involves a preprocessing step where
  - if `postcss === true`, it is executed immediately as function without argument.
  - if `postcss` contains any other truthy value, then the object is destructured to set `postcss` as top level value.
- Next step involves added the plugins to normalized list. 
  - if `plugin` is `object`
      - and `plugin.plugins` is `Array`, the plugins are merged to the normalized plugin list.
      - and `plugin.postcssPlugin` is truthy, it is appended to normalized plugin list.
  - `type` `'function'` directs becomes eligible to be added in normalized list.
- Other types are naturally eligible to enter the error conditions.

## LazyResult <a name="lazy-result"></a>

#### constructor
Takes in CSS either as `string` or already parsed `Node`|`Root`, to pass `Root` to new instance of `Result`. Along with `Result`, `helpers` and `plugins` are also added as data members to this.

## Result <a name="result"></a>
This is a very simple data structure to store fields (like a POJO):
- `processor`
- `Array<Warning>` as `messages`
- `root`
- `css`
- `map`
- `opts`
Main processing logic is present in other modules. Here, both `content` and `toString` returns the same `Result.css`.

## Plugins <a name="plugin"></a>
Extends from `Processors`. If they are `async`, then `Promise` must be returned.

#### prepare
takes in `Result` and returns `Processors`

## Warning <a name="warning"></a>
A simple structure that is used to get debug info i.e. source and location of the error and the plugin that is causing this. It has got a self-explanatory `toString` method.

## Other Entities <a name="entity"></a>
### AcceptedPlugin
`Processor` takes an Array of `AcceptedPlugin` which can be of type:
- `Plugin`
- `PluginCreator<any>`
- `OldPlugin<any>`
- `TransformCallback`
- `{postcss: TransformCallback|Processor}`
- `Processor` - The current `Processor` instance will copy this `Processor`'s plugins
List git branches ordered by date of last commit
Tags: git
Published: 2022-01-10 00:59:30


First day back after Christmas break and I'm a bit hazy on what I was working on.  I know I was working on an area of code weeks ago but not sure if it got merged into Master.  

Git can help.  I'll list all my local branches by descending commit date.  Luckily my branch names are taken from my workitem id.

```
git branch --sort=-committerdate  # DESC
```

I found the branch I was after near the top of the list.  I then checked if the last commit on that branch was in master.  Easy.

One to remember...
2022: New Year && Goals
Tags: career, goals, coding
Published: 2022-01-10 00:52:45

---
title: 2022: New Year && Goals
published: true
description: This is the year, I can feel it. Making smaller (ish) goals and sticking to them
tags: career, goals, coding
---

The first few drafts of this post were rehashing the last two years in a bit more detail than I’m sure anyone would ever want to read about again. Instead, it’ll be a high level overview of what happened and future goals for this year! 

2020 had started on a high note of pushing my introvert tendencies to be more social and connect with others and was quickly shut down; we all had to think of different ways to connect with others. Despite the doom and gloom of the year (pandemic, protests, wildfires), some good things did happen: meeting new friends, frequent walks/hikes, visiting family, attending my friend’s wedding, and others but 2021 is where it all went sideways.

Last year had felt like life had stagnated and it became more difficult to pull out the positive moments. A few of those positive notable events were moving to a new place, adopting my own cat pal, [Tycho](https://pbs.twimg.com/media/FHLulegVkAUPdYG?format=jpg&name=medium), planned out a solo vacation, and was featured in the [CodeNewbie spotlight](https://community.codenewbie.org/codenewbie/haley-elder-the-environmentalist-coder-2nb6). To add onto the stagnation were some personal and professional events that had shattered my self-confidence, trust, increased my already bad imposter syndrome and really took a hit to my mental health and ongoing burnout. 

To give myself the proverbially kick in the pants and pull myself out of this funk, I’ve envisioned my top three goals list for this year:

THE BIG THREE (ish):
- Get a real developer/engineer role! (stretch goal: maybe even do some open source work?).
- Run a 10k race! Aiming at [Bridge of the Goddess 10k](https://runwithpaula.com/bridge-of-the-goddess-half-marathon-10k) in September or so.
- Read a book a month (maybe get into more audiobooks)! I hope to keep  my [Goodreads list](https://www.goodreads.com/user/show/21498539-haley) updated and looking for recommendations.

I took the first week ish off to regroup and ponder how to write this out as the tail end of the holidays were a bit stressful and needed a break. On to 2022!

“The secret of getting ahead is getting started”
- Mark Twain
10 CRITICAL MISTAKES every Software Engineer should avoid
Tags: programming, career, discuss, productivity
Published: 2022-01-10 00:50:10

## Introduction
The following tips have been a result of 8 years+ experience in the Software Industry, working through several roles in startups, corporates, in-office, and remote. There might be a lot more tips that you folks have and I'd love to see them in the comments either on this post, or in the comments of my video

{% youtube ZNZu1Wlm7_E %}

## Mistakes to avoid
- [Thinking your way is always the 'Best' way](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=36s)
- [Not reading the Documentation](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=112s)
- [Being obsessed with Tools and Frameworks](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=166s)
- [Not focusing on your personal well-being](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=232s)
- [Following requirements blindly](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=323s)
- [Not shipping stuff until it is 'Perfect'](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=401s)
- [Not reaching out for help](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=472s)
- [Thinking your code will 'Always' be utilized](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=613s)
- [Not adding value when you see an opportunity](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=691s)
- [Not helping others grow. Especially your juniors](https://www.youtube.com/watch?v=ZNZu1Wlm7_E&t=735s)

## Conclusion
If you liked this post and the video, make sure to 💗 and 🔖 this. Also, subscribe to the channel for more content.
If you have any question or queries, feel free to connect with me on [my socials](https://bio.link/muhd_ahsanayaz).
Happy coding! 🙌
My typescript compiler seems broken, compile camel case json key to lowercase json key
Tags: typescript, npm, vscode, webdev
Published: 2022-01-10 00:48:55

My dev tool: visual studio code & npm & powershell
My dev pc: Window 11
Here is the secnario I encountered
please notice the loginName in black background of vscode is camel case and the loginname in white background of chrome is lowercase
I just type npm run serve

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

After some digging,I still have no clue, I added lowercase key loginname into the Json, and below is its illusration


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

Please help me ,thank you ahead.
Git Survival Kit - Part 1
Tags: git, github, productivity, devops
Published: 2022-01-10 00:42:36

[Read Part 2](https://dev.to/farhadfaghihi/git-survival-kit-part-2-bb2)

In the life of every developer regardless of experience level, comes a day when she needs to get out of or resolve an awkward git situation. In this series, I'm going to share some simple yet life-saving git commands that are both easy to learn and vital to your day-to-day version control ops.

**1. undo the first commit** ( assuming there is only one commit in the history)
`git update-ref -d HEAD`  

**2. undo the last (n) commits and return the changed files to staging area**
`git reset --soft HEAD~n`

**3. print the number of commits on all branches grouped by authors**
`git shortlog -s -n --all`

p.s - yes Jayson, that's how I found out that I've done more commits than you. Take that.

**4. undo a pushed commit in the remote repository, on master branch**
`git push origin +{commit-hash}^:master`

**5. See all the upstream repository urls, where you're 'pushing' your code.**
`git remote -v`

**6. remove a file from the staging area**
`git reset <file_name>`

**7. remove all files inside a folder from the staging area**
`git reset <folder_name>/`

**8. ignore changes to already tracked files**
`git update-index --assume-unchanged <file>`

another alternative :

`git update-index --skip-worktree <file>`

[read more on assume-unchanged vs. skip-worktree](https://stackoverflow.com/a/13631525/2450855)

**9. undo last tip: start tracking files again**
`git update-index --no-assume-unchanged [<file> ...]`

**10. show list of tags, sorted by date descendingly**
`git tag --sort=-creatordate`
Why your environment variable doesn't work in production.
Tags: webdev, programming, functional
Published: 2022-01-10 00:29:13

There are many reasons why your environment variable might not work in production. Maybe it works in development, but not in production? There's a lot of room for error. This article should help you understand why your environment variable might not work in production.

## Valid formatting and structure for environment variables

```bash
ENV_VARIABLE_NAME='value'
```

The standard for setting environment variables is to format the variable name to be all uppercase with underscores between words. Notice how there's no whitespace between the variable name and the value. The variable name is proceeded by an equals sign, then comes the value for the variable. The value should be surrounded by single or double quotes. Often the hosting provider will deal with this, meaning you won't need to add any quotes. But if you do, you can use single or double quotes.

Environment variables are structured this way due to their original use in the Bash programming language, where for example even whitespace is a significant part of the syntax.

## Case 1 - Environment variable is not set

This is the best-case scenario. If the environment variable is not set, it can be set however the best practice is to set it with the hosting provider you're using.

For example with Vercel, you go to your project, to _Settings_ and then _Environment Variables_. You can set the environment variable there.

It's also important to note that after you set the environment variable, you will likely need to restart your project (often done by redeploying it) to allow your hosting proivder to use it in your project.

## Case 2 - Environment variable is set, but incorrectly

The second best-case scenario is if the environment variable is set, but the value is incorrect. This can obviously be fixed by changing it to the correct value. But, the correct value is not always so clear. Should you be using quotes, single quotes perhaps, or none at all? It can be a little tricky to figure out what the correct format is.

As mentioned earlier, environment variables are very sensitive to any extra characters, including whitespace. From past hours of debugging, even a carriage return character (which is invisible may I add) which may exist at the end of the variable, can result in the environment variable not being correct. It's genuinely that strict.

## CORS Errors (honorable mention)

CORS errors are caused entirely by the backend. To follow best practise, you should not be trying to fix CORS errors by using funky scripts or front-end workarounds. CORS is an important browser security feature, it's made to protect against malicious attacks.

## Final thoughts

As explored here, environment variables can sometimes be a bit of a mystery. They might not always be set correctly, and when they don't work, it can be tricky to figure out why. Hopefully by reading this post it's helped you to figure out why your environment variables weren't working.
VSCode-Java Maven configuration error
Tags: notes, development, configuration, java
Published: 2022-11-01 22:27:16

---
title: VSCode-Java Maven configuration error
published: true
date: 2022-01-10 00:00:00 UTC
tags: notes,development,configuration,java
canonical_url: https://qjuanp.dev/post/vscode-java-maven-configuration-error
---

There is no day that I not face a “funny” error developing in Java, saying that, it’s not my intention generate drama nor a new whole discussion Java vs The world…. this error is merely product of my ignorance in java and the composability you could find in this development ecosystem (coff coff Msft!).

Joke aside, I found myself in a “particular” scenario:

> When I run the cli command `mvn clean compile` project simply compile perfectly!, even the tests were running without a problem. But, when I opened up the project in a VSCode, the compiler went crazy and it was just saying that the project has a ton or compilation errors, errors like:

- “Failed to read artifact descriptor for…”
- “Missing artifact…”

VSCode-Java uses under the hood the same tools, java and maven, to verify the sources and bring us information during development, so, how can be possible get two different results if, under the hood, are basically the same tooling?

> This error can come up with certain packages available in **private repositories**.

The problem is basically that VSCode-Java/Maven tool is not able to find the default settings that are commonly stored in `~/.m2/settings.xml` or `%USER_PROFILE%\.m2\settings.xml` where the private repositories for maven are configured.

This can be specified using the VSCode setting entry:

`"java.configuration.maven.userSettings": "C:\\Users\\<UserName>\\.m2\\setttings.xml",`

> Or pointing to the specific settings.xml location that you are using for private repos.

Hope that it helps!

## References

- [redhat-developer/vscode-java#1232](https://github.com/redhat-developer/vscode-java/issues/1232)
- [redhat-developer/vscode-java#1365](https://github.com/redhat-developer/vscode-java/issues/1365)