teleren/devto huggingface dataset:
Use npm pack to test your packages locally
Published: 2022-02-18 21:39:00

When working with npm packages you often want to test your package without having to publish it to npm. This enables you to have a quicker feedback loop and keeps the number of published versions to a minimum. 

This is where [`npm pack`](https://docs.npmjs.com/cli/v7/commands/npm-pack) comes in.

## First: Build your Package

Before you can use `npm pack` you must first build your package. So run your build command and check that this has completed successfully. In my use case, for `@ag-grid-community/angular` the command is:

```bash
community-modules/angular$ npm run build
```
## Second: Locate your Build Artifacts package.json

The important part of this step is to run `npm pack` in the correct folder location where the build artifact package.json is located. Depending on your project that may be the same folder as where you ran your build. For me though, with this Angular library that means navigating into the `dist/ag-grid-angular` folder as that is where the Angular library builds to.

```bash
community-modules/angular$ cd ./dist/ag-grid-angular
```
## Third: Pack your artifacts

Now it is time to package our build artifacts to enable us to produce a package that mimic what would be published to npm. We tell npm to pack it to our user folder `~` for ease.

```bash
community-modules/angular/dist/ag-grid-angular$ npm pack --pack-destination ~
```
After this runs you will have the following file.

```
~/ag-grid-community-angular-27.0.0.tgz
```

## Fourth: Point package.json to your file

Now that we have this package we can test it in our application. To do this we update our `package.json` to point to the file that we produced in the previous step.

```json
"dependencies": {
  "@ag-grid-community/angular": "file:~/ag-grid-community-angular-27.0.0.tgz"
}
```

Then make sure you remember to re-install your packages after this update.

```
npm install
```

## Fifth: Test your package in your application

Now you can run your application using your packed dependency. 
 This enables you to test your package without having to publish it to npm for all the world to see. 

Not only does this save us time by giving us a quicker feedback loop but it keeps our published packaged versions clean. This approach also gives us more confidence that our library is working as expected when installed into an application. We are more closely mimicking our users as opposed to testing against the raw source files.

Happy testing!

---

Stephen Cooper - Senior Developer at [AG Grid](https://ag-grid.com/)
Follow me on Twitter [@ScooperDev](https://twitter.com/SCooperDev) or [Tweet](https://twitter.com/intent/tweet?text=%22Use%20npm%20pack%20to%20test%20your%20packages%20locally%22%20by%20%40SCooperDev%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fscooperdev%2Fuse-npm-pack-to-test-your-packages-locally-486e) about this post.
Auth0.org’s Latest Grant Recipients
Tags: security, news, productivity
Published: 2022-02-18 20:57:29

### 5 Nonprofits Joining Auth0’s Grant Partners Program.

### <br>

As we kick off 2022, we are thrilled to welcome the addition of 5 more nonprofit organizations, plus a renewed commitment to our current grant partner Techbridge Girls, to the 35+ amazing social impact organizations we have supported through Auth0’s social impact arm, Auth0.org. Each charity in the Auth0.org program is receiving substantial unrestricted grant support and volunteer hours from Auth0 employees (“Auzurios”).

Since its inception in mid-2020, Auth0.org has granted over $1.1 million to charitable organizations around the world, and Auziros have generously provided their time, money, expertise, and passion to many of these wonderful charities.

This latest cohort of partners is composed of amazing changemakers, globally-recognized institutions, and emerging social good orgs that are breaking down barriers and building people up – reaching new heights in what can be accomplished when care meets cause. 

The members of our latest cohort are:

* [Goodie Nation](https://goodienation.org/)
* [SCWIST (Society of Canadian Women in Science and Technology)](https://scwist.ca/)
* [Washington STEM (Science Technology Engineering and Math)](https://washingtonstem.org/)
* [Techbridge Girls](https://www.techbridgegirls.org/)
* [Coqual Black Equity Index](https://coqual.org/black-equity-index/)

Please be sure to take a moment to learn about our 5 latest cohort members below and consider engaging with them in the ways listed below. Every contribution, whether of your time, money, or expertise helps improve lives locally and globally.

## Auth0.org Fund Winter Cohort 4 Member Organizations

[Read more...](https://auth0.com/blog/auth0-orgs-latest-grant-recipients/?utm_source=content_synd&utm_medium=sc&utm_campaign=growth)
Resume Builder
Tags: javascript, webdev, react
Published: 2022-02-18 20:50:03

https://github.com/nisabmohd/resume-builder

##  Features
- Save To PDF
- User Friendly
- Straight Forward

## Overview


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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjo5thhbzk6n13nvtm97.png)
Debuggando funções com mais facilidade no VSCode.
Tags: vscode, debug, javascript, typescript
Published: 2022-02-18 20:38:19

Fala, jovens! 👋🏼

Eu sou a Julia e nesse meu primeiro post eu vim trazer para vocês uma coisa que eu descobri a pouquíssimo tempo mas que está me ajudando pra caramba, principalmente na hora de debuggar o código.

Segue ⬇️

Quando temos uma função, independente se com somente um parâmetro ou muitos, nem sempre conseguimos de forma rápida identificar para qual parâmetro está sendo passada aquela informação, por exemplo:

Temos aqui, um componente React com um botão que, ao clicar, realiza o login do usuário com determinado serviço (Github, Google, Apple, etc.)

![Interface do editor de texto Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fr0o7yuhzis3fmmrzq3.png)
 
Neste caso, chamamos a função **signIn** para executar a rotina de login e passamos alguns parâmetros para ela. 

Se você é um programador que já trabalhou com rotinas de login, provávelmente conseguirá identificar, neste caso, qual parâmetro é qual por conta da experência, mas em alguns casos, nos deparamos com rotinas que não estamos acostumados a trabalhar diariamente e para entender à qual parâmetro estamos passando tais informações, teremos que procurar a declaração da função.

**❗️É aí que entra a configuração de parâmetros do VSCode!** 

Dentro do VSCode, indo em **Configurações** e pesquisando por **_parameter name_**, vamos encontrar duas configurações: uma para a linguagem javascript e outra para a linguagem typescript.

Ao mudarmos essas configurações para **all**, o VSCode automaticamente irá mostrar, ao lado de cada parâmetro passado na função, qual é o seu respectivo nome, se liga:

![Interface do Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfpcs6du3ptfol8xd69y.gif)
 

Dessa forma fica muito mais fácil debugar funções e entender os parâmetros que estão sendo passados para cada uma, tirando, em muitos casos, a necessidade de procurarmos a declaração da função.

Muito legal né? 🤓

O único ponto contra que encontrei até agora é que, em alguns casos muito pontuais, eu acho que ela acaba "bagunçando" o código, principalmente nos primeiros dias que eu utilizei, o que não tira em nada o mérito uma vez que _8 em cada 10 casos ela mais ajuda do que atrapalha_.

Por hoje é isso, guys!

Espero que tenham curtido e comenta aí se você já conhecia essa funcionalidade e o que achou dela.

Até a próxima! Valeu! ❤️
Where Frontend Ends and Backend Begins Continued...
Tags: frontend, backend, webdev, podcast
Published: 2022-02-18 19:43:38

{% spotify spotify:episode:5qWCDHkd8ZK3vPWrI7OK3z %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

In this episode Matt and Mike jump into part two of [Where Frontend Ends and Backend Begins](https://dev.to/mikhailkaran/where-frontend-ends-and-backend-begins-2jdh) an almost entirely example-based episode, going over a basic web page and what parts should/could be frontend, or backend. This example site includes a CMS, slider, static text, calling from an API, authentication, form validation, and much more


## Show Notes

Breaking down a podcast landing page between what can be done in the frontend and what can be done in the backend:

* Slider/Hero
* Description/About Section
* Podcast episode grid
* Email sign-up form
* CMS


## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Truly Understanding React (TUR) - EP1
Tags: javascript, webdev, react, devops
Published: 2022-02-18 19:22:18


![Try Understanding React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovb50uz7htxa8of1qxq6.jpg)
So far so good, I have been working on a number of projects of which have demanded that I really understand the React Library to its core.

For a while, I had been juggling around into thinking that React is one simple library or framework that you just can bounce into, simply because you may be pretty fluent in building SCSS design system of creating a function to populate classes.

To be frank, React is a Library to the prepared minds. Moving from building simple html pages,  progressive web apps, without any library or frameworks, to getting eloquent in React has indeed developed in my mind another paradigm I use now in my use approach to programming; the advantages of logical thinking, knowing your goals and the neccesary steps to take in accomplishing them, and many more.

React indeed is a Library built by great minds for greater accomplishments in developing software solutions.

My journey on React is truly graceful and enlightening, and I really can't wait to grasp all that I can break  down each of the seemingly difficult part as telling the story of an anthill in the jungle.
Get Started in Seconds with Nexjs Examples
Tags: nextjs, react, webdev, beginners
Published: 2022-02-18 19:12:20

Most of the developers that start with Nextjs are not aware of the abundance of Nextjs examples, that are part of the Nextjs GitHub repo. You can use a handy CLI tool `create-next-app` to get any example running in seconds.

## Where Can You Find Nextjs Examples?
If you want quickly browse all the examples, you can find them in the `examples` folder [here](https://github.com/vercel/next.js/tree/canary/examples).

Yet, there is a better way. Simply go to [https://nextjs.org/examples](https://nextjs.org/examples). If you scroll down a bit, you will find a nifty filter. 

Pretty neat, huh?

Here you can filter examples by:
- Styling
- Data Fetching
- Authentication
- CMS
- Next.js Features
- Database
- State Management
- Misc

## How to Use Create Next App with an Example?
Nextjs has built an awesome CLI tool that makes it easy to get started in seconds.

```shell
npx create-next-app@latest
# or
yarn create next-app
```  

If you want to start a project with an example, you can do it like this.

```shell
npx create-next-app@latest --example [name]|[github-url]
# or
yarn create next-app --example [name]|[github-url]
```

Let's do this with a real working example (no pun intended).

``` shell
yarn create next-app --example auth0 auth0-app
``` 

This will simply create a new Nextjs app located in `auth0-app` folder. The example `auth0` will be already pre-installed.

## Bonus
The benefit of using the CLI tool is that you can combine it with many other options. For example, you could add a `--ts` flag to have typescript also included in your project.

You can read more about other options [here](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

I hope that Next time (sorry, no pun intended, again) you will be looking for a Nextjs example, you will know where to start.

Happy hacking!
First Developer Job!
Tags: go, wecoded, career
Published: 2022-02-18 19:08:50

I'm so excited to announce that I've accepted a position at [charm](https://charm.sh)! 

![lipgloss example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4worep6o1zwvm72qpuie.png) 
 
I'll be hacking away at their tools with the team and working with the community to improve the products, host fun events, and add value to users as a developer relations person. The team is truly incredible and I'm looking forward to growing more as a developer and content creator. 

If you haven't heard about Charm, they build command line tools for developers. If you've ever seen my [live coding on Twitch](https://twitch.tv/bashbunni), you'll know how much I enjoy living in the terminal and how convenient it is to have useful terminal tools. I'm actually building a side project using [bubbletea](https://github.com/charmbracelet/bubbletea) and [glamour](https://github.com/charmbracelet/glamour) that acts as a project journal for keeping track of your design decisions throughout the lifespan of a project. 

If you want to learn more about that [project](https://github.com/bashbunni/project-management), you can check out my "elevator pitch" [here](https://clips.twitch.tv/AntediluvianTameMarjoramOptimizePrime-g6oPzwGG5Vz8T5Zh)

I'm really excited to dive deeper into their ecosystem and provide guidance to other developers on how to use the tools to improve their quality of life. I think that providing developers with tools that make the command line fun and accessible will lead to significant improvements in their workflows just like it has mine. 

Stay [tuned](https://twitter.com/charmcli) for updates on how to get started with their tools and for cool projects that get built with them.
#IC's first mobile #dev tool "Agent_dart"
Tags: dfinity, web3, crypto, flutter
Published: 2022-02-18 18:51:33

#IC's first mobile #dev tool "Agent_dart"(by @Astrox_Network) has released V0.1.19! 
https://pub.dev/packages/agent_dart

Use it devs can easily make: mobile #DApps/Wallets/Identity/DEX, ect.

😈BTW, Distrikt's mobile products based on Agent Dart.
Created my first shot in Figma
Tags: figma, design
Published: 2022-02-18 18:25:40

 Hello. I'm Ranganath. I am a Javascript developer but I wanted to learn design systems so I started learning to create a design using Figma, showing you the design that I have created in Figma.

![Sahaaya figma design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zshi4242tujqe56s4ujv.png)


![Sahaaya figma design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8nsaq77j5ih1pjtv80e.png)

I was planning to create my portfolio website, I thought to design my portfolio on my own before starting to code. I started learning figma by creating my first shot shown above. 

By the way, which framework you choose to build your portfolio? Let me know.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-02-18 18:09:38

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


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
- Spending time with friends or family ... or whatever else might spark joy ❤️ 

---

Congrats on those wins and happy Friday!

![Make some noise](https://media.giphy.com/media/duQ01m74d7uZZHXrfo/giphy-downsized-large.gif)
How to avoid infinite loops onIonChange.  
Tags: ionic, react, loop, hooks
Published: 2022-02-18 17:54:13

**Backstory**

_I encountered a problem at work while creating a search page with several filters using an [IonSelect](https://ionicframework.com/docs/api/select) for each. The problem came when I added a 'clear all' button to clear the filters, which threw me into a neverending loop._ :scream:

**My solution** 

1) Imported the [useState Hook](https://reactjs.org/docs/hooks-state.html) and declared a state variable like the one below.
```javascript 
const [isResetting, setIsResetting] = useState(false)
```

2) Created a reset button which would change the state variable to `true` when clicked.
```javascript 
onClick={() => setIsResetting(true)}
```

3) Imported the [useEffect hook](https://reactjs.org/docs/hooks-effect.html) and set it to run only when `isResetting` changes. What I wanted to achieve here was for the `resetAllFilters` function (step 4) to run only when `isResetting` is set to `true`.
```javascript 
useEffect(() => {
	if (isResetting) resetAllFilters();
}, [isResetting])
```

4) Created the `resetAllFilters` function, which should change the value of all the filters. The last line on this function should be to change the state variable `isResetting` back to `false`.
```javascript 
const resetAllFilters = async () => {
	// insert your code	
	setIsResetting(false);
}
```

5) Last but not least, I made sure that when the state variable `isResetting` is set to `true` the `IonSelect` does not change its value, thereby avoiding going into an infinite loop.
```javascript
<IonSelect
	multiple={true}
	placeholder="Select tags"
	value={filters.tags}
	placeholder="Select tags"
	onIonChange={e => isResetting ? console.log("reset at work") : applyFilter("tags", e.detail.value)}										>

```

And voila! With these 5 steps I solved my problem at work. 

I didn't find any other solutions online, but would love to hear if anyone else has encounted this problem and solved it in a different way.  

---

If you liked what you read hit that :heart: on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart. 

:computer: **article.close()**
My story with ADHD, ADD and web development

Published: 2022-02-18 17:41:52

My name is Ahmed Abbas and I am 16 years old I have ADHD or ADD I found out about it a month ago by chance someone posted a video talking about this disease and the symptoms are identical I learned programming 2 years ago in 2020 in the 3 month I learned html css javascrtipt php and when I finished learning I wanted Creating my first html css website I couldn't remember some codes and so far I forgot some codes. If I forget a certain code, write it on YouTube and copy it, this week I go to the doctor to diagnose me, even in study and in class I do not notice that I am distracted.

  #ADHD #ADD #html #css #website
TweetJOBS
Tags: twitter, nextjs, javascript, hackathon
Published: 2022-02-18 17:25:44

TweetJOBS displays all the jobs posted on twitter and updates it in real time, you can search your skill in the search bar and VIOLA you will get the job post for the skill on twitter from where you can apply for it. 


## **Technologies Used**
Tech-Stack Used: Next.JS, twitter API and hazelbase for authentication.


## **Our Inspiration**
This project was inspired from [YellowJobs](https://yellowjobs.org/), which also uses twitter functions in the same way and provides user with job posts posted on twitter and helps them get jobs


## **So What Have We Done Basically:**
We are using twitter API to search for jobs and use there URLs to generate embedded tweets of the same and render on our page/

We are using Hazelbase's authentication to provide faster and secure authentication to our user with the help of next-auth.

Our Search bar searches for the related query on twitter and brings you best required results 

You can also save job posts for later, and can go trough them when you see fit. 

This project not only highlights the power of twitter as social media but also the values of skill in today's modern day world.

## **Important Links**
This project is made by [Ishan](https://github.com/ishanjain1502) and [Gulshan](https://github.com/Gulshanaggarwal/)
Project Repository: [https://github.com/Gulshanaggarwal/tweet-jobs]
(https://github.com/Gulshanaggarwal/tweet-jobs)
Deployed Project: [https://tweet-jobs.vercel.app/](https://tweet-jobs.vercel.app/)


**IF YOU ARE READING THIS BLOG, GO PARTICIPATE IN THE HACKATHON [Hazelbase](https://www.hazelbase.com/blog/hackathon) AND DON'T FORGET TO MENTION US IN YOUR SUBMISSION**
Write Better Git Commit Messages To Increase Your Productivity
Tags: productivity, programming, git, coding
Published: 2022-02-22 21:37:26

---
title: Write Better Git Commit Messages To Increase Your Productivity
published: true
date: 2022-02-18 17:07:14 UTC
tags: productivity,programming,git,coding
canonical_url: https://betterprogramming.pub/write-better-git-commit-messages-to-increase-your-productivity-89fa773e8375
---

[![](https://cdn-images-1.medium.com/max/1920/1*NIPNoJF9WkwdoddofBCxaw.jpeg)](https://betterprogramming.pub/write-better-git-commit-messages-to-increase-your-productivity-89fa773e8375?source=rss-1282c85b5cbc------2)

See how a minor change to your commit message style can make a huge difference in productivity

[Continue reading on Better Programming »](https://betterprogramming.pub/write-better-git-commit-messages-to-increase-your-productivity-89fa773e8375?source=rss-1282c85b5cbc------2)
Day-27 Training At Ryaz
Tags: mongodb, javascript, webdev
Published: 2022-02-18 16:57:36

- Date:18/02/22
- Day:Friday

Today,I started at about 10:50 am and as I was completed with all course part and was left with setting up user and host files so, I have created user modules, user controller , and user route and for creating new user I have take only two inputs i.e username, email as I was directed to do so. and after tis I was left with host part and I was supposed to do it by today but there are some problems I was facing and I was busy in resolving that so, I could complete the user part and now we can create user, update user, fetch details of user, delete user so, aim left over with only host part as I have to give host access to create source and edit it and have to give user access to watch and create himself.so, this way my day ended up and I got to learn many of new things.
🌎 My backpacker's 3D MOVING earth portfolio [Next.js/Three.js]
Tags: nextjs, typescript, threejs, react
Published: 2022-02-18 16:50:35

#### ⭐ _Star me on GitHub — it motivates me a lot!_ 😀
- [website](https://kaziu.jp)
- [repo](https://github.com/kazoogon/portfolio)  

## What is that?
This is my portfolio that you can see countries where I have been as backpacker, and what happened

## Technologies
- next.js
- typescript
- styled-component
- three.js
- anime.js

## ex
I created before this moving earth with typescript, but I used `ts-ignore` in almost every ts files 😅

and this time resolved all ts errors, yeah I was fighting