teleren/devto huggingface dataset:
Dynamic Livewire Load Performance
Tags: livewire, laravel, performance
Published: 2022-02-15 02:43:49

In my previous post on [Load Dynamically Livewire Components from Different Namespace](https://dev.to/nasrulhazim/load-dynamically-livewire-components-from-different-namespace-574j), I've hit an issue which causing my boot time to load the Laravel application is very slow.

On my machine, it run about 500-800ms, but for my team, sometimes they hit around 5-6 minutes to load for just a page.

![Before Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3v608e6rj6xy678ncdr.png)

So the journey begin to find out what's the issue, why it's taking so long to boot up. At first, I'm looking at my route files, which I have a lot of route files been loaded dynamically like the following:

```php
collect(glob(base_path('/routes/web/*.php')))
    ->each(function ($path) {
        require $path;
    });
```


Then I change the route to:

```php
require 'web/_.php';
require 'web/user.php';
```

Well, not much different, just about -10ms better.

So digging up my codes, see, what other things may caused until I remembered that I have a service provider, which load dynamic Livewire components in different domains in `app/` directory.

One thing I noticed, I misconfigured to load the Livewire classes from `/app` instead of `/app/Domains`. 

You can imagined how many files under `app/` directory need to be load on initial load. 😬

With that in mind, I've tried to change from following:

```php
public function register()
{
    if (class_exists(Livewire::class)) {
        $this->load(base_path(config('livewire-domain.path')));
    }
}
```

To the following:

```php
public function register()
{
    if (class_exists(Livewire::class)) {
        $this->load(config('livewire-domain.paths'));
    }
}
```

And my config file as following:

```php
'paths' => [
    app_path('Domain/Profile'),
    app_path('Domain/User'),
],
```

Well the result? 

![After Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slwoh9iy77hkayfhopyt.png)
How to recreate Figma in React
Tags: react, javascript, webdev, tutorial
Published: 2022-02-15 02:41:46

Here is an animated post I made on how to recreate Figma in React. I'll leave a short preview here on dev.to, and the direct link is [here](https://textframe.app/rahul/figma-in-react).

Here is how the post looks like: 
![Post Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvl29n1ym0kt7nx3yqe0.gif)

This is the result of following the post: ![Preview of output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjnm20d2yz8wh074lnm0.gif)

Hope you enjoy, and let me know what you think!
Github README with diagram using mermaid
Tags: github, readme, diagram, git
Published: 2022-02-15 02:30:01

Want to add diagrams in your github .md files to tell the flow of your system or the flow of each component talking to each other ? Today I just found something useful worth to share and lets just dive in with this simple example.

Flowchart
```
    ```mermaid
        flowchart TD;
        
        A[Process] --> B{Condition?};
        B -- Yes --> C[Another Process];
        B -- No --> D[Exit Process];
        C ----> E{Another Condition?};
        E -- Yes --> F[Etc...];
        E -- No --> G[Etc...];
    ```
```

Each Letters before nodes represents as their id's so when you call `A ----> B` means node A will point to node B.

Output:

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


To know more about other use cases their are plenty of examples here [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/)
Other sources [github-blog](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)
Vim remaps use cmd in place of :
Tags: vim, linux, cli
Published: 2022-02-15 02:18:22

---
canonical_url: https://waylonwalker.com/til/vim-cmd/
published: true
tags:
- vim
- linux
- cli
series: til
title: 'Vim remaps use cmd in place of :'
---

Anyone just starting out their vim customization journey is bound to run into this error.

``` vim
E5520: <Cmd> mapping must end with <CR>
```

## I did not get it

I'll admit, in hindsight it's very clear what this is trying to tell me, but for whatever reason I still did not understand it and I just used a : everywhere.

## From the docs


If you run `:h <cmd>` you will see a lot of reasons why you should do it, from performance, to hygene, to ergonomics.  You will also see another clear statement about how to use `<cmd>`.

``` vim
                                                          E5520
  <Cmd> commands must terminate, that is, they must be followed by <CR> in the
  {rhs} of the mapping definition.  Command-line mode is never entered.
```

## When to map with a :

You still need to map your remaps with a : if you do not close it with a
`<cr>`.  This might be something like prefilling a command with a search term.

``` vim
nnoremap <leader><leader>f :s/search/
```

## Otherwise use <cmd>

If you can close the `<cmd>` with a `<cr>` the command do so.  Your map will automatically be silent, more ergonomic, performant, and all that good stuff.

``` vim
nnoremap <leader><leader>f <cmd>s/search/Search/g<cr>
```
How to setup a Wordpress or Drupal site locally with DDEV
Tags: wordpress, drupal, php, docker
Published: 2022-02-15 01:46:34

DDEV is an open source tool that allows setting up local sites using docker, quickly. You don’t need to know complex concepts about docker to be able to have your local WorpPress or Drupal sites working. You can check their official documentation here https://ddev.com/get-started/ and here https://ddev.readthedocs.io/en/stable/

The steps/commands listed below are the ones that I have needed the most, so I am moving this note to the web as a reference for myself, in the future, or to help others who may needed.

##How to install DDEV##

1. Install homebrew, following the steps at: https://brew.sh/ 
2. Install ddev (MAC): `brew install drud/ddev/ddev`
3. You need to run ddev config once per project to set it up, and it will ask you three questions:
    * What’s site name?
    * What’s the location of the docroot?
    * What type of project is it? Such as Drupal, PHP, WordPress, etc.
4. You need to run `ddev start` to have the project up and running. You can run the command from outside of the folder if you remember the project name.
5. Want to import a database? You can run `ddev import-db –src=dumpfile.sql.gz` from the project directory. It will drop the database for you before importing the new database backup.
6. What about if you need to run composer, drush or wp-cli commands? You should run `ddev ssh`
7. Are you having an error and need to see the logs? You should run: `ddev logs -f`
8. I have needed to run this command before I was able to run drush on some of my Drupal projects: `ddev composer require drush/drush`
9. Need to get the URL of the sites, the port or check if the services are active? `ddev describe` will give you that info.
10. If you need to have your local sites using with https, you should run: `mkcert -install`
11. Need to debug PHP code with xdebug? You will need to run ddev xdebug to enable it. `ddev xdebug off` will turn it off again.
12. You are on mac, and your local sites are super slow, you should run `ddev config global –mutagen-enabled` and it will enabled mutagen globally. You will notice the difference immediately.
13. If you followed the step 12, and need to update a lot of files (maybe updating plugins or modules?), mutagen may be slow to pick the updated files, so you may need to run `ddev mutagen sync` to accelerate the sync process.
14. Need to test your site with a different PHP version, so you can use `ddev config –php-version 8.0` 8.0 can be any PHP version that you need.

What is your favorite way to setup local sites?
Implement Rust trait for all types that have another trait
Tags: rust, types, trait
Published: 2022-02-15 01:30:04

Rust traits are powerful. A particularly neat thing you can do is implement a trait for several types at once. To give a simple example, a trait for squaring numbers mainly depends on multiplying them:

```rust
trait Square {
    fn square(&self) -> Self;
}
```

We could implement this trait for a single type like so:

```rust
impl Square for u64 {
    fn square(&self) -> Self {
        self * self
    }
}
```

But instead of adding `impl Square for ...` for each type we want to `.square()`, this `impl` can be generalised to all types that `impl Mul`:

```rust
impl<T: Mul<Output = T> + Copy> Square for T {
    fn square(&self) -> Self {
        *self * *self
    }
}
```

The key here is `impl<T: ...> Square for T { ... }`, that is, `for T`, the type that the `impl` takes as parameter. When eventually the constraints on `T` become too many, they can be moved to a `where` clause:

```rust
impl<T> Square for T
where
    T: Mul<Output = T> + Copy,
{
    fn square(&self) -> Self {
        *self * *self
    }
}
```

Here's an example of `.square()` being used for multiple types that already `impl Mul`:

```rust
fn main() {
    println!(
        "{}, {}, {}, {}",
        10u8.square(),
        3u16.square(),
        4u32.square(),
        5u64.square()
    );
}
```
ScriptExternalLoadError Loading script failed 
Tags: modulefederation, webpack, react
Published: 2022-02-15 00:13:53

Hello Experts, 

Please help!

This is regarding webpack Module Federation question.
Created 2 react apps (remote and host) using npx create-mf-app

Rendered Simple Hello in react app1. 

Adjusted webpack config files in both react apps.

Works great in one machine. Did the same in other machine and it throws errors:
Uncaught ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:8081/remoteEntry.js)
while loading "./Counter" from webpack/container/reference/remote..

Any help greatly appreciated!
Count Models and Get Detailed Analytics With Laravisit Package
Tags: opensource, laravel
Published: 2022-02-15 00:14:08

---
title: Count Models and Get Detailed Analytics With Laravisit Package
published: true
date: 2022-02-15 00:00:22 UTC
tags: OpenSource, Laravel
canonical_url: https://coderflex.com/blog/count-models-and-get-detailed-analytics-with-laravisit-package
---

## Introduction
[Laravisit](https://github.com/coderflexx/laravisit) by [@ousid](https://github/ousid) is a package to keep track of your pages & understand your audience, by providing a helpful API methods, easy to implement, and easy to use.

<p align="center">
    <br><br>
    <img src="https://github.com/coderflexx/laravisit/raw/main/docs/images/Logo.png" alt="Laravisit Logo" width="300">
    <br><br>
</p>


## Prerequisite
You need to know the following:
- Need to know [PHP](https://php.net)
- Basics on Laravel & the artisan command [Laravel](https://laravel.com)
- Basics on composer [Composer][https://getcomposer.org]

# Why this package?
If you want to keep track of your pages visits, and understand your audience (users), this package is built for you, to save you time and make your development experience simpler.

## Installation

You can install the package via composer:

```bash
composer require coderflexx/laravisit
```

You can publish the config file with:

```bash
vendor:publish --provider="Coderflex\\Laravisit\\LaravisitServiceProvider"
```

then, run database migration
```bash
php artisan migrate
```

This is the contents of the published config file:
```php
return [
    /*
    |--------------------------------------------------------------------------
    | User Namespace
    |--------------------------------------------------------------------------
    |
    | This value informs Laravist which namespace you will be 
    | selecting to get the user model instance
    | If this value equals to null, "\Coderflex\Laravisit\Models\User" will be used 
    | by default.
    |
    */
    'user_namespace' => "\Coderflex\Laravisit\Models\User",
];
```


## Usage
See more details and use cases on the [package docs](https://github.com/coderflexx/laravisit#usage) page.

## Changelog

You can follow the changes on this [package](https://github.com/coderflexx/laravisit) by accessing the [changelog](https://github.com/coderflexx/laravisit/blob/main/CHANGELOG.md) or the [releases](https://github.com/coderflexx/laravisit/releases)

## Contributing
If you want to contribute, feel free to read the [CONTRIBUTING](https://github.com/coderflexx/laravisit/blob/main/.github/CONTRIBUTING.md) guidelines, and make your `PR`

## Conclusion
Today we s learned about [Laravisit](https://github.com/coderflexx/laravisit) package, and how to use it. To make our development process easier and save us time.
Levels of Abstraction in Testing
Tags: testing
Published: 2023-09-09 00:59:55

---
title: Levels of Abstraction in Testing
description: Sam Selikoff on how to make unit tests easier to read.
published: true
date: 2022-02-15 00:00:00 UTC
tags: testing
canonical_url: https://michaeluloth.com/testing-levels-of-abstraction/
---

Sam Selikoff's [Levels of abstraction in testing](https://youtube.com/watch?v=G_0yKeh0Sf0) does a nice job demonstrating how to make unit tests easier to read by abstracting the low level setup steps at the beginning of each test into a well-named function.

After that change, the everything in the tests reads at a single level of abstraction (namely, how would a user interact with this component?) rather than alternating between what the computer is doing and what the user is doing. The result is easier to understand.

> Basically, you just want to act as if you’re sitting next to the person who is using the system you’re testing…just imagine how you’d explain to them what behaviour you’re testing and then write your tests using similar words.

I think this advice would apply just as well to non-test code. If you notice a code block mixes levels of abstraction, try extracting the lower level bits so the resulting code reads as a continuous train of thought from a single point of view.

Check out Sam's complete video:

{% youtube G\_0yKeh0Sf0 %}
Chalk, TypeScript and Lerna
Tags: chalk, typescript, lerna
Published: 2022-02-15 00:00:00

---
title: Chalk, TypeScript and Lerna
published: true
date: '2022-02-15'
spoiler: Get chalk working with TypeScript, get color output with chalk in Lerna.
description: Get chalk working with TypeScript, get color output with chalk in Lerna.
tags: chalk,typescript,lerna
canonical_url: https://www.sergevandenoever.nl/chalk-typescript-lerna/
---
After a lot of struggling with getting [chalk](https://github.com/chalk/chalk#readme) to work with TypeScript I finally found ([in the documentation](https://github.com/chalk/chalk#install)) that you should just use version 4 of chalk! In the release notes it is stated that:

> If you use TypeScript, you will want to stay on Chalk 4 until TypeScript 4.6 is out.

I can now use chalk as follows from TypeScript:

```typescript
import chalk from "chalk";

console.log(chalk.red("This is red"));
```

Next problem: color output is stripped when using [Lerna](https://lerna.js.org/).

If you run `lerna run doit --scope mypackage --stream` all color output is stripped.

To fix this set the environment variable `FORCE_COLOR=1`.

For example in an npm script do the following:

```
   ...
   "run_doit_in_package_mypackage": "cross-env FORCE_COLOR=1 lerna run doit --scope mypackage --stream"
   ...
```
Best software development tools are heavily in demand.
Tags: softwaredevelopment, programming, career, developer
Published: 2022-02-14 23:54:20

The software industry is among the largest and fastest-growing industries out there. 

There are several types of software development tools, each performing a specific role. 

Here the best tools you should use in 2022:

🔸 **GitHub**
🔸 **Gleek**
🔸 **Codepen**
🔸 **Figma**
🔸 **Buddy**
🔸 **Atom**
🔸 **Bootstrap**
🔸 **Azure**
🔸 **Trello**
🔸 **Slack**

#coding #developerlife #softwaredeveloper
Microbundle is not enough
Tags: javascript, webdev, beginners, opensource
Published: 2022-02-14 23:19:01

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to [Microbundle](https://github.com/developit/microbundle). While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

[Microbundle Template Repository](https://github.com/ivandotv/microbundle-template)
Day 530 : For You
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-14 23:11:24

_liner notes_:
- Saturday : Since my co-host wasn't able to make it to the station and I had some packages being delivered, I decided to do the show at the spot from the van. Not having to drive, find parking, and get ready for the show gave me a good amount of time to  prepare for future shows and do some coding. Had a good time as usual and got to test of the new desk I put into the van. Everything worked out really well! The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a US Passport and N95 mask with the words Feb 12th 2022 No Beet, No Mask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tgrqlull1th3927ou9w.jpg)

- Sunday : Did the https://untilit.works cyphers. Got some stuff done. Not as much as I wanted, but I did make a dent in my current side project. It was a thing I was kind of worried I wouldn't be able to get working, but it looks like it will. At least on my local machine, we'll see once it's deployed. haha After that, watched some anime and called it a night.

- Professional : Pretty chill day. Had a meeting, helped with a community question, did a content review on an upcoming blogpost for a coworker and then worked on a presentation for this week.

- Personal : This side project is coming together. Not as fast as I hoped, but I'm learning alot. I think I added just enough difficulty to it that it's not too easy or unreachable. It's just that there's quite a few moving pieces and things I didn't foresee keep popping up, but I work them out and get back on schedule. Good news is that it looks like I'll be making use of it alot so it'll only help in the future. Plus I have another side project kind of like this one and this will help complete some stuff I left off on the other one.

![Above the clouds over Cape Town, South Africa with a setting sun](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ls0qvnfn0hkadq0de6t.jpg)

Tonight is pretty much dedicated to finishing up the side project so I can start creating content to put on it. The admin section is complete (as far as I can tell, haha), created a template for the content, and got everything hooked up to the database. Now, I just need to make the front end that will show everything. Cool thing is that some of the parts will consists of web components I've already made so I won't have to worry about that. Just need to make a couple more components and should be good. That's one reason I like web components, you build them and they are there for you to reuse in another project. Alright, going to eat and get back to work. Hopefully once I get everything deployed, maybe I'll watch some anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube CPJysLNfEm0 %}
Home page using React Native for Telescope 
Published: 2022-02-14 22:44:42

#Overview
Next is important since there will be the release 2.7 and I still have 2 issues to work on which are creating bottom nav-bar and homepage. For the nav-bar, I have sent a [PR](https://github.com/Seneca-CDOT/telescope/pull/2824). Everything is almost done but I still have to find an issue that changes the Icon of Telescope while I was in the middle of rebase. This pretty sure will be done before 2.7 landed.

#Home page
In terms of the home page [issue](https://github.com/Seneca-CDOT/telescope/issues/2858) or in my case named home screen, I started by taking a look at mobile responsiveness of Telescope to gain the idea of the design. Basically, there are a lot of services in the home page ^^, so I think breaking these things into smaller tasks will be much more easier. For now, I will just making a static home screen. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swgoamq1515vfoswxbol.png)
Home screen for now will include a component named Banner. Of course in the future, there will be more like Image service, Posts service, etc. I also created a function named <code>navigateToContact</code>. As it name, it is used to navigate to contact screen, I will pass this function from the parent to Banner -> BannerButtons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6sef7ksmzwnoah8d8xf.png)
Banner component will simulate the original banner of Telescope so it will have BannerButtons, and Student quotes, here I will call it BannerText.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6e1tuegqwve2hmg10oi.png)
BannerButtons has 2 buttons for navigating to Contact Screen and an option for signing in. The funny thing of React Native is that it is limited to style a <code>Button</code> component, so I use <code>Pressable</code> instead. It is something user can press on and if you style it properly, it will be come a button. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk0w1lzg8ek3sa0imfgk.png)
I re-used the <code>useEffect()</code> that we already had in the front-end of Telescope to randomly display the student quotes in the banner. And again <code>Pressable</code> is used as a <code><a href="..."></code> to go to the student's blog link when user clicks on the code.  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpx4f4culdx701qsp6xl.png)
New file named student-quotes.js was copied from <code>src/web</code> as well. 

#Result
For now, I have some problem with CSS and the home page is still not styled properly so there is no PR at the moment. It will come out soon this week.
Stop mixing Science and Politics
Tags: ethics, morals, deontology
Published: 2022-02-14 21:39:32

That's it. No fancy content. Just stop. You're neither activists, nor scientists, nor humanists. You just flail your personal agenda around everywhere, especially where it has no place to be.

Strive for objectivity, leave your personal likings to the side. Science is meant to make the world an objectively better place by understanding how it works; it's not about pushing one's ideology onto the world.

You're not the source of absolute truth, I'm not the source of absolute truth: we're not the source of absolute truth.

Stop skipping steps thinking you've figured everything out, and ***reevaluate*** everything. Every bit of certainty is to be challenged, for it may be only temporary.

____

EDIT: Mixing Science and Politics is probably what makes corrupt scientist exist. You obey the laws that are to be obeyed because you're a citizen, but you cannot let yourself be bought by ideologies or material wealth.