teleren/devto huggingface dataset:
How to call or stub with same imported function with multiple ways using proxyquire
Published: 2022-01-26 03:43:03

In controller I have imported config file for getting path for userId and secret path location and auth file for getting the userId name and secret value based on that I have redirected to some endpoint. but when I write the testcases how to pass or get the all details using stub. can you please assist.

**controller.ts**

```
import { userConf } from './conf';
import {userSec} from './auth'

 export function userInfo(req: Request, res: Response) {
const path='test:path';
const path1='test:path1'
const userID = userConf(path); //user/Id
const userPass=userConf(path1); // user/pass
const secId=userSec(userID); // raj
const secPass=userSec(userPass) // Otersg
const url=`https://mapuser.com?userId=${secId}&usersec=${secPass}`;
res.redirect(302,url);
}
```
**details.json**

```
{
"test":{
    "path":"user/Id",
    "path1":"user/pass"
 }
}
```
**conf.ts**

```
export function userConf(path) {
  return 'implementation for getting path';
}
```
**auth.ts**

```
export function usersec(path) {
  return 'implementation for getting values';
}
```
**test.spec.ts**

```
import sinon from 'sinon';
import proxyquire from 'proxyquire';

 describe('should redirect', () => {
 it('should pass with all valid', () => {
  const getpath = sinon.stub().returns('test:path');
  const getsecId = sinon.stub().returns('ram');
  const urlctl = proxyquire('./controller', {
  './conf': {
    userConf: getpath,
  },
  './auth': {
    userSec: getsecId,
  },
});
const req = {};
const res = { redirect: sinon.stub() };
urlctl.getId(req, res);

sinon.assert.calledWithExactly(res.redirect, 302, 'https://mapuser.com? 
userId=raj&usersec=Otersg');
 });
 });
```
What's New In Microsoft Edge Devtools?
Tags: programmer, webdev, css, devops
Published: 2022-01-26 05:53:43

As you all guys seen, my last post was about new updates in chrome's devtools. Here i'm going to writing about the new updates in Edge Devtools.

While Microsoft’s browser team continues to be an active contributor to the Chromium project, they’re also spending more time on new and unique features that only Edge has. Let’s review two of them here.

## DEBUG DOM MEMORY LEAKS WITH THE DETACHED ELEMENTS PANEL

Edge just launched a memory leak investigation tool, the Detached Elements tools, which can be very useful to investigate leaks in long-running apps.

One of the multiple reasons why web pages leak memory is detached DOM elements: elements that might have been needed at some point, but got removed from the DOM, and never re-attached. When a code base grows in complexity, it’s easier to make mistakes and forget to clean those detached elements up.

If you find that your app keeps on needing more and more memory over time as you use it, give the Detached Elements a try. It can very quickly point you in the right direction.


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

Learn more about it on the [announcement blog post](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/), and the [docs](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks).


## A BRAND NEW USER INTERFACE FOR DEVTOOLS WITH FOCUS MODE

Our DevTools have looked the way they do ever since the early Firebug days. Sure, the user interface has evolved over time a little bit, with more tools added, and things re-arranged, but at a high level, it’s still mostly the same.

The Edge team has conducted experiments and user studies that indicate that DevTools can be very overwhelming (did I say DevTools had more than 30 panels already?). While new web developers don’t have a clear idea of where to start and how to explore and use the tools, more experienced developers tend to find themselves in just one or two familiar workflows.

Based on this, the Edge team released a new experimental feature that makes it easier to learn and use DevTools: `Focus Mode`.

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

`Focus Mode` has a new activity bar, an easy way to add and remove tools, a quick view drawer, and re-designed menus.

To give `Focus Mode` a try, enable it first by going to `Settings > Experiments > Focus Mode`.

You can learn more about `Focus Mode` in this [Edge explainer document](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/DevTools/FocusMode/explainer.md).


**I hope you enjoyed these updates, and that they’ll turn out useful when doing web development.**
Angular Color Picker
Tags: angular, color, colorpicker, tutorial
Published: 2022-01-26 05:34:51

**Building the library**

`npm install`
`npm run build`

**Running the example**

npm install
npm run start

**Installing and usage **

npm install ngx-color-picker --save

**Load the module for your app:**
`import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  ...
  imports: [
    ...
    ColorPickerModule
  ]
})`
Laravel 8 Generate PDF Using DomPDF
Tags: laravel, laravel8, pdf, html
Published: 2022-01-26 04:48:47

In this tutorial, we will see laravel 8 generate pdf using dompdf. For generating pdf files we will use the laravel-dompdf package. 

It creates a pdf file and also provides download file functionalities it is very easy to generate pdf in laravel 8. I will give you an example in a very simple way to generate pdf file and download it to your system. 

Using barryvdh/laravel-dompdf pdf you can create a new DOMPDF instance and load an HTML string, file or view name. You can save it to a file, or show it in the browser or download it. Also, you can generate pdf from HTML view in laravel 6/7/8.

So, let's see laravel 8 generate pdf using dompdf or download pdf in laravel 8.

```

Step 1 : Install Laravel 8

Step 2 : Install barryvdh/laravel-dompdf Package In Your Application

Step 3 : Add Service Provider And Aliase

Step 4 : Create Controller

Step 5 : Add Route

Step 6 : Create Blade File

```

After adding all code in your application you can download a pdf file of your HTML view.


![laravel_8_generate_pdf_using_dompdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnk479j522r4ozdrr2zj.png)
Self-Taught Developer Journal, Day 47: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-26 04:44:12

Today I started to arrange my HTML elements on my web page to match my mockup.

![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojs6sxjea80emloeiak1.png)
 
Then I styled the border for all of my classes with a red, 1px, solid line border. I saw this trick on Twitter where you can better see the elements on the page as you're styling. It helped me a lot to visually verify what I was doing in CSS.

![Elements Red Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qidjgztk1meb2c777goc.png)

I mainly used flexbox again since I don't know any other way to move the elements around without statically inputting values. I'm a little unsure if this is how I want to keep it, but I will stick with it for now.

I'm planning to finish adjusting and then start on the JavaScript for the game.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
Add vite-plugin-pages to SolidJS
Tags: solidjs
Published: 2022-01-26 03:39:03

Since official SolidJS starter template are vite-based we can easily use [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) to create automatic routing a.k.a file based routing with official [solid-app-router](https://github.com/solidjs/solid-app-router) package.

First create a new project by running these commands in your terminal:

```bash
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

Or for TypeScript:

```bash
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```

Then install the router dependencies:

```bash
> npm i solid-app-router
> npm i -D vite-plugin-pages@v0.18.2 
```

Configure `vite.config.js`:

```diff
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
+ import Pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
+    Pages({
+      react: true,
+      importMode: 'async',
+    }),
    solidPlugin()
  ],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
});
```

Then `src/index.jsx`:

```js
import { render } from "solid-js/web";
import { Router } from "solid-app-router";
import App from "./App";

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("root")
);
```

And finally `src/App.jsx`:

```js
import { useRoutes, Link } from "solid-app-router";
import { lazy } from "solid-js";
import routes from 'virtual:generated-pages'

export default function() {
  const Routes = useRoutes(routes.map(route => ({
    ...route,
    component: lazy(route.component)
  })));
  return (
    <>
      <h1>Solid App</h1>
      <ul>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/about">About</Link></li>
      </ul>
      <Routes />
    </>
  );
}
```

> Note: use `vite-plugin-pages` v0.18.2, the greater version contains breaking changes and the Solid implementation seems more complicated. :/
Tmux and Vim Clipboard for Ubuntu
Tags: linux, vim, tmux
Published: 2022-01-26 03:35:56

---
canonical_url: https://waylonwalker.com/til/ubuntu-terminal-clipboard/
published: true
tags:
- linux
- vim
- tmux
series: til
title: Tmux and Vim Clipboard for Ubuntu
---

One of the first things I noticed broken in my terminal based workflow moving from Windows wsl to ubuntu was that my clipboard was all messed up and not working with my terminal apps.  Luckily setting tmux and neovim to work with the system clipboard was much easier than it was on windows.

First off you need to get `xclip` if you don't already have it provided by your distro.  I found it in the apt repositories.  I have used it between Ubuntu
18.04 and 21.10 and they all work flawlessly for me.

I have tmux setup to automatically copy any selection I make to the clipboard by setting the following in my `~/.tmux.conf`. While I have neovim open I need to be in insert mode for this to pick up.

``` bash
# ~/tmux.conf
bind -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "xclip -i -f -selection primary | xclip -i -selection clipboard" bind-key -T copy-mode-vi MouseDragEnd1Pane send-keys -X copy-pipe-and-cancel "xclip -selection clipboard -i"
```

To get my yanks to go to the system clipboard in neovim, I just added unnamedplus to my existing clipboard variable.

``` vim
# ~/.config/nvim/init.vim
set clipboard+=unnamedplus
```

If you need to copy something right from the terminal you can use xclip directly.  I do this semi-often to send someone a message in chat.

``` bash
cat file.txt | clip -sel copy
```

I set up some alias's for doing this a bit more efficiently, but don't find myself using them very often.  This helps me grab commands from history and copy them.

``` bash
alias hclip="history | tail -n1 | cut -c 8- | xclip -sel clip" alias fclip="history -n 1000 | fzf | cut -c 8- | xclip -sel clip" alias fclip="history -n 1000 | fzf | xclip -sel clip"
```
How to make a little design system with Figma (intro)
Tags: design, figma, tooling, tutorial
Published: 2022-01-26 03:04:42

Content:
- [What is a design system?](#what-is-a-design-system)
- [My object](#my-object)
- [First step: How do I want my apps to look like?](#first-step-how-do-i-want-my-apps-to-look-like)
- [Second step: Make a figma project](#second-step-make-a-figma-project)

Hello there, I'm very happy to share my first post here.

I am a junior front-end developer and will be starting a series of posts about the figma tool.

### Some things before we start.
#### What is a design system?
>“Everything that makes up your product” — “From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build and grow”
>_— css-tricks.com_

Like any system, a design system is complex because it unites
different parts that must work together. It takes into account everything that a product needs to exist, not only regarding the visual aspect but also things like brand, identity and purpose.

#### My object
As a beginner in web development, I want to improve my technical skills, so I have thought about creating some web-based tools for personal use and at the same time growing my portfolio. 

My projects don't need a whole design system. I would like these apps to have a consistent visual design, that they feel like part of an ecosystem. To get it more easily I want to have a library of UI components with centralized styles following my design principles. For this reason I will not cover all aspects of a design system in my posts, we will focus in get a "little design system", just develop Style Guides and Pattern Library modules.

I know that it sounds like _reinvent the wheel_, since I could use some existing option, but I think the knowledge about UI and UX that I would gain doing it by myself will be helpful in my journey as a front-developer.

now yes, let's start.
###First step: How do I want my apps to look like?
The answer to this question is to determine what app we are going to build (we know this from the software requirements). In my case, I want apps to take notes, pomodoro timer and similar. As they are tools that I'll use everyday, I want a simple design and few colors, a design focused in highlight the wanted functionalities.

### Second step: Make a figma project
Stop to think (for now), it's time to get to work.
I will use [figma.com](https://www.figma.com) because it's fast, web-based, has a great free plan, and I like because I've used it before.

To use figma we have to create a account.

Once inside the account, we will create a **New design file**.
![Figma create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hptp9flb8l04oaw2vb6k.jpeg "Figma create project")

And this is the figma work space.
![Figma work space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db083vmgs6kjvwa33ccs.jpeg)
It's recommended to put an appropriate name to our project.

This is all for now, in the next post I will create color components.
Klaytn Incubation Program
Tags: solidity, github, blockchain, startup
Published: 2022-01-26 03:04:04



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mlpzc2o29c6y5r642hu.png)Hey Dev members! Am new to the community and would like to share an exciting opportunity. Klaytn, the blockchain arm of Kakao is running an incubation program and are looking for startups especially in Gamefi, Metaverse, Creator Economy and Defi. Kakao is  South Korea's largest internet company and they are very big into gaming.  Klaytn's chain is similar to ETH so building on Klaytn is easy and seamless. There is also a grant of $50K SGD worth of Klay tokens to be given to startups in the program.  Here's the program info link. https://www.f10.global/program/klaytn
Aplikasi kasir terbaik
Published: 2022-01-26 02:59:39

Seorang pengusaha menginginkan sebuah sistem yang dapat membantu meningkatkan penjualan serta bisa berjalan tanpa harus diawasin. betul ya?

Halo, perkenalkan saya Dany CMO dari yapos aplikasi kasir yang bertempat di Surabaya jawa Timur.

Aplikasi kasir yapos memiliki fitur yang bisa membantu Anda menjalankan bisnis dengan lebih mudah. fitur tersebut antara lain :

1. Keamanan, ini dapat membantu Anda meminimalisir kehilangan uang serta data penjualan Anda.
2. Berjualan, fitur utama yang bisa membantu Anda untuk melakukan pengecekan laporan dan stok produk dimulai dari sini.
3. Stok Produk, lebih mudah mengetahui stok produk secara live.
4. Laporan penjualan, dengan aplikasi kasir yapos usaha Anda akan menerima laporan secara otomatis dalam waktu 24 jam.
5. Pembelian, memudahkan Anda untuk mencatat pembelian produk guna memenuhi kebutuhan produk yang Anda jual.
6. dan masih banyak yang lainnya.

Jika Anda ingin mengetahui lebih banyak tentang fitur aplikasi kasir Yapos, Anda bisa kunjungi [disini](https://yapos.id).
JavaScript: Don't use replaceAll
Tags: javascript, webdev, codequality
Published: 2022-01-26 02:50:03

Instead of using `replaceAll`, it is better to use `replace`.
But why? Doesn't `replace` just replace the first character/sentence it finds?

The context of our discussion this time is replace & replaceAll which is a built-in function/method for String in JavaScript.

First, let's see how to use it
```js
const kalimat = 'Kita akan membuka toko. Kita akan menjual kebab' 

// replaceAll
const kalimatReplacedAll = kalimat.replaceAll('Kita', 'Saya')

// replace
const kalimatReplaced = kalimat.replace('Kita', 'Saya')

console.table({
  kalimat,
  kalimatReplacedAll,
  kalimatReplaced,
})
```

Above code will have output message like

| (index) | Value |
| ------- | ----- |
| kalimat | 'Kita akan membuka toko. Kita akan menjual kebab' |
| kalimatReplacedAll | 'Saya akan membuka toko. Saya akan menjual kebab' |
| kalimatReplaced | 'Saya akan membuka toko. Kita akan menjual kebab' |

- `replace` & `replaceAll` don't change the value, it returns the changed value.

	Therefore we have to accommodate the changes into a new variable.
- `replaceAll` changes all findings, whereas `replace` changes only the first finding.

### Problem
Then why?
The problem is in compatibility

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

The problem that may occur is __Runtime Error__ on some older devices/browsers.

Especially for friends who develop webview apps, this needs to be a concern.

### Solution

Use `replace`.
If you want to replace all findings, use _Regular Expression_ with `replace`, as follows
```js
const kalimatReplacedNew = kalimat.replace(/Kita/g, 'Saya')
console.log(kalimatReplacedNew) // 'Saya akan membuka toko. Saya akan menjual kebab'
```

Okay thanks.


### Source
- [Original Article](https://abdulghofur.me/blog/javascript-dont-use-replaceAll/)
- [Article in Bahasa Indonesia](https://abdulghofur.me/blog/javascript-jangan-pakai-replaceAll/)
- [Compatibility](https://caniuse.com/?search=replace%20string)
- [replaceAll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)
- [replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
- [Regular Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
Measuring Code Execution Time Using Stopwatch
Tags: java, opensource, programming, productivity
Published: 2022-01-26 02:36:33

You might have used the `System.out.println(end - start + "ms elapsed")` through `System.currentTimeMillis()` to measure the execution time of a piece of code.

If you have a small number of code points to measure, it can be quite appropriate to do this.

**But when we have a lot of code points to measure, this makes us difficult.**

![](https://c.tenor.com/dTP4cRnO9bEAAAAC/sweating-nervous.gif)

If you want to see the result with a meaningful name and how much of the total time it takes, you have to add cumbersome code to do it. like: 

```java
long start = System.currentTimeMillis();

long initStart = System.currentTimeMillis();
// initialization
long initEnd = System.currentTimeMillis();

long processingStart = System.currentTimeMillis();
// processing
long processingEnd = System.currentTimeMillis();

long end = System.currentTimeMillis();

System.out.println("initialization: " + (initEnd - initStart) + "ms");
System.out.println("processing: " + (processingEnd - processingStart) + "ms");
System.out.println("total: " + (end - start) + "ms");
```

![](https://c.tenor.com/Rv1xH5kdMu8AAAAC/endgame-now.gif)

### It's Time to Use Stopwatch

[Stopwatch](https://github.com/silentsoft/stopwatch) is a library that helps you measure the execution time of a piece of code with a meaningful name and how much of the total time it takes.

We can simply use it like this:

```java
Stopwatch stopwatch = new Stopwatch();

stopwatch.start("initialization");
// ...
stopwatch.stop();

stopwatch.start("processing");
// ...
stopwatch.stop();

stopwatch.start("rendering");
// ...
stopwatch.stop();

stopwatch.print();
```

The `stopwatch.print()` will give you the result like this:

```
|           name |     % |      ms |      s |
|----------------|-------|---------|--------|
| initialization | 59.5% | 1,234ms | 1.234s |
|     processing | 40.0% |   830ms | 0.830s |
|      rendering |  0.5% |    10ms | 0.010s |
|                |       |         |        |
|          total |  100% | 2,074ms | 2.074s |
```

### One More Thing

![](https://c.tenor.com/kPoUqVlwGg0AAAAC/benedict-cumberbatch-endgame.gif)

The Stopwatch can be paused and resumed to remove the time between code points where you do not want to measure. like this:

```java
stopwatch.start("rendering");
// prepare rendering
stopwatch.pause();
// load font stuff
stopwatch.resume();
// render
stopwatch.stop();
```

## Conclusion

Stopwatch can remove chores from your code. If you have a lot of code points to measure, or you want to see the result with a meaningful name and how much of the total time it takes, you can use it.

Thank you for reading this article. If you like Stopwatch, give it a :star2: on [GitHub](https://github.com/silentsoft/stopwatch).

{% github silentsoft/stopwatch %}
I treat docs as textbooks and read them regularly
Published: 2022-01-26 02:33:48

> Image credit: Richard Mortel. Place: Dhahran al-Janub, Asir Region, Saudi Arabia. Clicked on: September 2020

I tend to memorize the documentation links, for example
[git-scm.com](https://git-scm.com), [docs.docker.com](https://docs.docker.com), [maven.apache.org](https://maven.apache.org) so that while searching on internet.

Each website is an architecture on par with real architecture. Each one has its nuances.

My search would be narrowed to `pom settings site:maven.apache.org`

I feel that this would lead to compound learning over time. To support this point I have been using git-scm.com (from 2016) for git documentation, and referred to it ever since. Now, I know the format of that website, where to find a specific topic in that website. Feels good. 😺

I use stackoverflow and blogs explanation to complement my understanding.

I can be biased. What do you prefer as a best learning aid, do you take notes or trust memory?