teleren/devto huggingface dataset:
Svelte, Ionic and the Ionic Router
Tags: svelte, ionic, webcomponents
Published: 2021-09-13 19:51:44

Since Svelte does not use a virtual-dom, it turns out the interoperability with web components is very good. Svelte is capable of creating web components as well. These two features make it play well with with Ionic and the Ionic router.

You can see an example on the svelte REPL [here](https://svelte.dev/repl/ebd0e48a2acf487799aec9575ccd1ef0?version=3.42.5).

The [Ionic router](https://ionicframework.com/docs/api/nav) has a good emulation of the routing transitions used on iOS and Android and I think the combination of svelte and Ionic are quite powerful.

In the example, we load the Ionic web components and CSS thought a CDN:

```
<svelte:head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js">
  </script>
  <script
    nomodule
    src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js">
  </script>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</svelte:head>
```

NOTE: It may look like you are loading a lot of code, but Ionic's web components are instantiated lazily, so only loaded when used. This improves your startup performance and Lighthouse scores.

The Ionic router works by routing to to web components. I.e. the way we make this work with svelte, is that we create a web component out of any route/page and refer to it in the <ion-nav> tag.


This code:
```
import { register } from "svelte-custom-elements";
import NavHome from "./NavHome.svelte";
	
const isRegistered = function(name) {
    return document.createElement(name).constructor !== HTMLElement;
};

if (!isRegistered("nav-home")) {
    register("nav-home", NavHome, []);
}
```

essentially imports our svelte component and then registers it as a web component called "nav-home".  NOTE: web component names must be unique. The last lines above are to ensure that when using hot module reload, the web component is not redefined, else you will get an error.

The Ionic router has path based and programmatic routing, which I will explore more in future posts.
The free from Validation Framework cookbook 🌽
Tags: javascript, react, angular, vue
Published: 2021-09-13 19:28:24

One attribute makes form validation frameworks completely redundant: `<form novalidate>` is the star of the show, but it doesn't do what you think!

But first, why do we have custom validation if html 5 has a huge plethora of validation attributes? I believe it's 2 fold, you cannot style the browser native validation messages, or the user has to support pre html 5 browsers (at this point, this ask is just sheer cruelty to frontend developers).

`novalidate` is similar to `preventDefault()` in that it prevents native browser behaviour, specifically validation messages, it actually hides the ugly native browser html 5 messaging you get if you use any html 5 validation attributes, such as `required`, `min`, `max`, `type`, `pattern` and instead does nothing...

> Soo you broke my form.. how is this validation?

It's still validating but you have to switch over to JavaScript and manage the validation yourself... 

> Kind of like a form validation framework but without any dependencies, loading, weight or new syntax?

Yep, 😊 because HTMLFormElement and all inputs have a few methods and less well known tricks, tricks you might not know, you can easily pull of validation.

## Tricks 🐰🎩
Let's see, to do this we will need:
- HTMLFormElement.checkValidity()
- HTMLInputElement.checkValidity()
- new FormData(someFormEl);
- all html 5 accessible validation attributes

Above are all the pieces you need in order to create accessable, JavaScript enabled, simple yet powerful form.

## But React, Vue, Angular 
People, your submit and on change events all have `target` references to the actual element 😱, you can call these methods just like any other JavaScript that ever has, or ever will be. You can even ref too if you like.

Do I use these techniques? yes I do in all of the above.

## Simple validation on submit
So because it's hard to describe for everything, let's do a React example
``` JSX
function onSubmit(e) {
    e.preventDefault();
    const form = e.target;
    if (!form.checkValidity()) {
        // form invalid!
        ... Stuff happens
    }
}
```

Okay from here we could just report some none specific error that might be fine in some cases and actually a security requirement in say a login form, but what if we want to check all the values of the form and find the broken thing. Off the top of my head there are a few ways, we could use `HTMLFormElement.elements`to return a Node list of all elements in the array but that uses the DOM and might not fit with idiomatic styles of your given framework even though it's way easier! even so you could call `element[I]checkValidity()` inside of a loop, that could help you work it out... Or we could do this:

``` JSX
function onSubmit(e) {
    e.preventDefault();
    const form = e.target;
    if (!form.checkValidity()) {
        // form invalid!
        const data = new FormData(form);
        const formEntries = Object.fromEntries(data.entries()); 
        // Loop through and validate
        formEntries
    }
}
```

That's it. Nothing more to say, no framework needed ♥️
My First Blog - React, Jest, CircleCI
Tags: react, javascript, testing, circleci
Published: 2021-09-13 19:08:14

The React application we were writing started to grow in size, as did the tests. Our repo was hooked up to CircleCI (other CI providers are available) which ran `npm test` for us. Things were going well, then all of a sudden, out of nowhere, the tests started failing. This lead us to identify some issues we had with our testing setup which I shall outline here.

The main reason the tests were failing in CircleCI was the linux boxes they were running on were running out of memory and falling over. The first thing we did was add a new testing call in `package.json`, this was `test:ci` and was to be run by CircleCI as part of the build process:
```
"test:ci": "tsc && react-scripts test --runInBand --logHeapUsage"
```
The `--runInBand` flag forces the tests to run one at a time. This slows the process down considerably so isn't ideal to have running in development (hence the new script which we configured circleCI to run). The `--logHeapUsage` flag is solely for debug and allows you to see the memory usage for each test suite, something that would have given us a better idea of the issue straight away.

There is also an issue with jest (our test provider) and garbage collection. Garbage collection isn't automatically done, so we needed to add this. Initially we changed our `test:ci` script in the `package.json` file to:
```
"tsc && react-scripts --expose-gc test --logHeapUsage --runInBand"
```
The `--expose-gc` flag opens up garbage collection from the node process. Secondly we needed to add:
```
afterEach(() => {
  if (global.gc) {
    global.gc();
  }
});
```
to the file that contains your jest setup. Both of these together enables garbage collection, thus reducing the memory used by the complete test suite.

These fixes solved our problem. CircleCI was now able to run the tests successfully!
Build a live chat app in Reactjs and Nodejs
Tags: react, node, webdev
Published: 2021-09-13 18:59:14

**Hello everyone**, today I want to write a bit about my little project (Gossip). 

[Check it out here!!!](https://live-chat-client.vercel.app/home)

### What is this project about
I made this project with users' privacy in mind, it means that users will get to use random username and messages won't be saved anywhere.

### Features
* Allow real-time conversation
* Create a account with email, username, and password. Email will be hidden away, and username can be generated randomly for users
* Create a chat room that can fits up to 300 people
* Create a private chat room, only people knowing the password could access
* Able to use random name and image to cover up your credentials
* Messages won't be stored anywhere
* Save your favorite rooms so that you can come back later
* Allow emojis that will make the conversion more realistic

### Technologies I used
React for client side and Nodejs for backend development

### Source Code
* [Client side](https://github.com/tuanthanh2067/live-chat-client)
* [Backend side](https://github.com/tuanthanh2067/live-chat-server)

### Explanation
_Coming soon_
Feliz Dia da Pessoa Programadora!
Tags: elixir
Published: 2021-09-13 18:56:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx6bctwe4c3qlvbejrtj.png)

Hoje é o [Dia da Pessoa Programadora](https://en.wikipedia.org/wiki/Day_of_the_Programmer). Por que? Por ser o ducentésimo quinquagésimo sexto (256º) dia do ano. E claro que [o primeiro dia do ano é o dia 1](https://dev.to/elixir_utfpr/um-errinho-em-elixir-1dof)! 

Por que 256? 256 é 2 elevado à oitava potência. Computadores trabalham com números binários. Logo, faz sentido que o Dia da Pessoa Programadora seja o dia do ano em que temos a maior quantidade de zeros num número binário no formato 1 e vários zeros: 100000000. Para completar, em hexadecimal, 256 é 100.

Fiz um pequeno programa em Elixir para comemorar. Veja abaixo:

```elixir
defmodule ProgrammersDay do
  def show_message_if_today_is_programmers_day() do
    show_message_if_today_is_programmers_day(is_it_today?())
  end

  defp show_message_if_today_is_programmers_day(true) do
    IO.puts("Happy Programmers' Day!")
  end

  defp show_message_if_today_is_programmers_day(_) do
    IO.puts("Today is not Programmers' Day!")
  end

  defp is_it_today?() do
    Date.day_of_year(Date.utc_today()) == 256
  end
end

ProgrammersDay.show_message_if_today_is_programmers_day()
```

Basta salvar o código acima num arquivo chamado `programmersday.exs` e depois, no terminal, chamar.

```
> elixir programmersday.exs
Happy Programmers' Day!
```

Se o dia em que você estiver executando o código for o Dia da Pessoa Programadora, o programa irá escrever na tela, como acima `Happy Programmers' Day!`, ou seja, `Feliz Dia da Pessoa Programadora`. Se não for, o programa vai escrever que não é dia da pessoa programadora.

O que há de interessante no programa acima?

- `Date.utc_today/0` é uma função (daquelas que não é função matemática) e que retorna o dia de hoje. Exercício: execute `Date.utc_today()` no `iex` e poste nos comentários o que ela retorna.
- `Date.day_of_year/1` retorna o índice (começando em 1 e indo no máximo até 366, em caso de último dia de ano bissexto) de uma data no seu ano. Por exemplo, `Date.day_of_year/1` aplicado a `~D[1050-03-12]` (que representa 12 de março do ano 1050 retorna que 12/03/1050 foi o 75º dia de 1050:
```elixir
iex> Date.day_of_year(~D[1050-03-12])
71
```
Como ano passado foi ano bissexto, temos que:
```elixir
iex> Date.day_of_year(~D[2020-12-31])
366
```

O restante não tem muita novidade, certo? Temos duas funções chamadas `show_message_if_today_is_programmers_day`: `show_message_if_today_is_programmers_day/0` e `show_message_if_today_is_programmers_day/1`. A primeira é pública e a segunda é privada.

Você consegue escrever uma versão mais interessante deste programa? Ou uma versão diferente, usando processos? Poste nos comentários!
How to remove npm package from a project?
Tags: javascript, webdev, node, npm
Published: 2021-11-13 13:06:23

---
title: How to remove npm package from a project?
published: true
date: 2021-09-13 17:59:21 UTC
tags: Javascript,WebDev,Node,npm
canonical_url: https://www.moreonfew.com/how-to-remove-npm-package-from-a-project/
---

NPM or Node Package Manager has made it really easy to install and manage packages in JavaScript projects. The number of packages available on npm has been on an increase and it has become very convenient to install a package in a project using npm. However, over time, it becomes important to remove npm package from the project which might be [outdated](https://www.moreonfew.com/how-to-find-outdated-packages-in-npm/ "How to find outdated packages in npm?") on [unused](https://www.moreonfew.com/how-to-find-unused-dependencies-in-npm/ "How to find unused dependencies in npm?").

## Remove npm package from package.json

Removing an npm package from package.json is quite easy and straightforward. You can **run the following command to remove or uninstall a package** :

```
npm uninstall <package_name>
```

For example, let us say we want **to remove the bootstrap package** from the project. The command would be :

```
npm uninstall bootstrap
```

**If you installed a package as a devDependency using the `--save-dev` command, you need to use the `--save-dev` along with the uninstall command**. For example:

```
npm uninstall --save-dev bootstrap
```

## How to uninstall global npm package?

Uninstalling global npm package is also very similar. **To uninstall global npm package you need to run the following command** :

```
npm uninstall -g <package_name>
```

For example, if you want to uninstall jsHint which say was installed globally, you can run the following command:

```
npm uninstall -g jshint
```

**Once you run the uninstall command,** you can notice that **the folder related to the package that you uninstalled would be deleted from the node\_modules folder** too, and **also the reference of the package in the package.json file would be removed**.

I hope you have learned how to remove npm package from a project. It is important that we regularly find and remove [outdated packages](https://www.moreonfew.com/how-to-find-outdated-packages-in-npm/ "How to find outdated packages in npm?") and [unused packages](https://www.moreonfew.com/how-to-find-unused-dependencies-in-npm/ "How to find unused dependencies in npm?") from package.json. You can find the outdated and unused packages and use the command to remove these packages to keep your package dependencies in control and to avoid bloating up the build files. Hope you found the article to be helpful. Let us know in the comments.

The post [How to remove npm package from a project?](https://www.moreonfew.com/how-to-remove-npm-package-from-a-project/) first appeared on [MoreOnFew](https://www.moreonfew.com).
NgRx Store Actions TS2339: Property 'foo' does not exist on type 'ActionCreator ...
Published: 2021-09-13 18:42:25

`TS2339: Property 'foo' does not exist on type 'ActionCreator {foo: string } & TypedAction >'`

If you have been facing this error in your strongly typed app, while creating effects here is the answer!

Use `ActionType<T>`

Action:

```
export const LoadAllFooAction = createAction(FooTypes.LoadAll , props<{ foo: string[] }>());
```

Effect:

```
loadFoo$ = createEffect(() => {
        return this.actions$.pipe(
            ofType(FooTypes.LoadAll),
            concatMap((action: ActionType<typeof LoadAllFooAction >) =>
                this.fooLoaderService.get(action.foo).pipe(
                    map((data) => ({ type: FooTypes.LoadAllSuccess, foo: data})),
                    catchError(() => EMPTY),
                ),
            ),
        );
    });

```
Using Laravel's withCount to count a sub query
Published: 2021-09-18 17:47:46

---
title: Using Laravel's withCount to count a sub query
published: true
date: 2021-09-13 18:34:07 UTC
tags: 
canonical_url: https://dcblog.dev/using-laravels-withcount-to-count-a-sub-query
---

When you need to could a sub query Laravel provides a useful withCount method that is perfect.

Take an example of a user can have records with a hasMany relationship:

I have a model called BookingCandidate that links to the user by its filled\_by\_id that matches a user\_id

```

public function filledJobs(): HasMany
{
    return $this->hasMany(BookingCandidate::class, 'filled_by_id', 'id');
}
```

 To count how many filledJobs match users a simple withCount will do the job:

```

User::withCount('filledJobs')->get();
```

this will add a `filled_jobs_count`field into the response.

You can also order by the field using it inside an order by:

```

User::withCount('filledJobs')->orderby('filled_jobs_count', 'desc')->get();
```

Fianlly if you want to use a closure with the withCount this can be down by using withCount([]) like this:

```

$start = date('Y-m-1');
$end = date('Y-m-t');

User::withCount(['filledJobs' => function($q) use($start, $end) {
    $q->where('filled_at', '>=', $start)
    ->where('filled_at', '<=', $end);
}])
->orderby('filled_jobs_count', 'desc')
->get();
```

I love how easy Laravel make these types of queries.
Web development studio survey 2021
Published: 2021-09-13 18:24:12

Hello, devs
If you are a web developer and love open-source like me, please help me with this survey for an open-source project.
Please be kind 🙏

https://docs.google.com/forms/d/e/1FAIpQLSegMFgF4URFssc1rhbUrO8l9z88H-n5wM3uBOmP3ntDj6SQ0A/viewform?usp=pp_url&entry.972956920=Nebula
Comparing Boilerplates
Tags: javascript, vue, angular, react
Published: 2021-09-13 17:59:39

In this blog post I will be comparing a React, Stencil, Vue, and Angular boiler-plates. A boilerplate is a reusable template to start your projects with. 
The stencil boiler plate included a readme file that explains the properties and their attributes which was extremely helpful in understanding the code. I was able to quickly install the dependencies and run the program without any issues. I do not recognize some of the folder conventions such as dist, and www. It is easily understood this boilerplate creates a web component. Overall the boiler plates has lots of folders and files that I am unsure how to utilize. 

The Vue Boilerplate uses folder structure and naming conventions I immediately realize. The Vue boilerplate was much easier to digest and understand. This boilerplate was also very easy to start up. 

The angular boilerplate reminded me of a react project with a views, images, and styles folder. I had a lot of trouble getting this project to run due to 'gulp' which I have never used before.  
I added the react boilerplate. This boilerplate had a large amount of miscellaneous files that I have never seen before and do not know how to utilize. It also had a large amount of folders and nested folders. I was able to install the dependencies and run the program without any trouble. This boilerplate includes lots of comments to help you navigate. 

I believe the best developer experience, and boiler plate I would choose to create an application with would be the VUEjs boilerplate. It was very easy to understand and navigate which allows the developer to focus on other things such as improved functionality. 

Group repo: https://github.com/3B4B/boilerplates
React Boilerplate: https://github.com/react-boilerplate/react-boilerplate
Image Slider {day -26}
Tags: 100daysofcode, webdev, javascript, begin
Published: 2021-09-13 17:59:12

#100daysofcode {day - 26}

search image and create a slider.

live: https://img-sliders.netlify.app
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w5r3jd2wz94juews2pi.png)
React Native Mobile Apps, Working With React Navigation Drawer Navigator And Authentication Flow
Tags: reactnative, tutorial, reactnavigation, video
Published: 2021-09-13 17:27:56

{% youtube 5e67b0PBcn4 %}

In this video we create a  custom drawer with header and logout button. We add an Authentication Navigation Stack for managing protected screens and public screens. Finally we prepare the code for the next part where we introduce Supabase for Authentication and User Management and React Hook Form with Yup for form validation

Join with me on my journey of refreshing my memory with React Native and building mobile applications

## Video Series - React Native Refresher
------------------------------------------------------------
Part 1 - Intro to Working with React-Navigation - https://youtu.be/uqH00SEmKxg
Part 2 - React Navigation Drawer Navigator And Authentication Flow - https://youtu.be/5e67b0PBcn4
Part 3 - Authentication And Supabase Login - https://youtu.be/aBuB-Q6vHDE
Part 4 - Authentication, Supabase, And React Hook Form - https://youtu.be/ZU3lXTm9nVY
Part 5 - Supabase Create Account, And React Hook Form - https://youtu.be/lu1JzyBfSOQ
Part 6 - Expo Camera, Supabase Buckets and Image Upload - https://youtu.be/RmlekGDv8RU

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
How to debug iPhone safari on mac in 2 steps?
Tags: webdev, debugging, ios
Published: 2021-09-13 17:25:20

Debug HTML, CSS and Javascript issues for the website open on iPhone safari directly from your mac in just 2 steps.


## Step1: Activate the Web inspector in your iPhone.
On your iPhone go to Settings > Safari > Advanced and toggle on Web Inspector .

![iphone web inspector tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqx557dd4qjomeqnwjs6.jpeg)

## Step2: Download Safari Technology Preview Browser
Goto this [Link](https://developer.apple.com/safari/technology-preview/) and download this super useful browser which will help in debugging the iOS safari on mac

Once downloaded-
1. Open the Safari Technology Preview
2. Goto Develop -> Select your iphone -> click on the iphone safari tab

Image 1
![safari technology preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuji1wg1omngab70ue77.png)


Image 2 

![safari technology preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q19xxznu0q0dkinjeuco.png)
IST 402 Boilerplates
Published: 2021-09-13 17:24:40

#Commonalities Between Boilerplates
Looking at the baseline of all these boilerplates, each has specific files across each one, such as an index.html and package.json. Also, when downloading each one using npm/yarn, each has tons of dependencies needed to run each one. They also include html, css, and JS to provide functionality to the files.

#Easiest Developer Experience
For the easiest experience with frameworks, I think VueJS might be the one to go for. The integration of existing projects into VueJS is said to be fast and smooth out of all frameworks, considering I have no experience with any of the others. Vue is one of the most popular frameworks when it comes to starting out, as well as being flexible to its users when building projects.

#Which Would I Choose?
After looking through all the frameworks in our Github, I think if I was to build an app tomorrow, I would use VueJS. It is one of the most popular frameworks in businesses and companies, and there is a lot of information regarding this framework, making it easy to learn and understand from a beginner's standpoint.

To see the boilerplate I used, click [here](https://github.com/hartjus/stencil-hello-world)
To see the Github for our group's organization, click [here](https://github.com/TheKodingKrab/boilerplates)