teleren/devto huggingface dataset:
Testing issues as usual...
Tags: testing, javascript
Published: 2019-08-03 13:11:06

Having gone through setting up CI/CD for my schmol project, I realized that TDD is a pretty darn cool thing to have and it helps to automate stuff and also gives confidence not just to the coder but also to the reviewer.

Having said that, I had implemented Jest and Enzyme to set up the tests. Now as a developer I am really interested in knowing more about testing. The company which I work for, Fave (We are hiring, link at the end of this post), focuses a lot of TDD and I see where and why is it needed.

So obviously I had to go with the most popular option, Jest paired with enzyme. I still don't have any idea why did I go with that. But hey, after a damn long setup...


![](https://thepracticaldev.s3.amazonaws.com/i/en98uykzvx1r1xnm92l4.jpeg)

GOSH DARN AWESOME! :scream:


I was really happy until I refactored my code right now. And ran into this bad boy.

![](https://thepracticaldev.s3.amazonaws.com/i/olizuza30t2jxj7p058m.jpeg)

![](https://media.giphy.com/media/CDJo4EgHwbaPS/giphy.gif)

So apparently Jest cant deal with importing images.

`When you import image files, Jest tries to interpret the binary codes of the images as .js, hence runs into errors.`

Did some research, found out that there is something called `moduleNameMapper`, that needs to be configured for things to work out.

ummmmmmmmmmm looks like too much work... NETFLIX BREAK!

![](https://media.giphy.com/media/l0HlL96SusHggSo6s/giphy.gif)

*2 episodes later*

Alright! Let's do this!

As I already had a `jest.config.json` for setting up polyfills for tests and also to set up the enzyme adapter(I don't know why, but it wasn't working otherwise).

All I had to do was add

```
"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
```

Now comes to mocking the files. Created them with a simple 
`exports default '';`... 


![](https://thepracticaldev.s3.amazonaws.com/i/ytxe709w8g1bubcp7at1.jpeg)

![](http://giphygifs.s3.amazonaws.com/media/i8tV2kJB8Gig8/giphy.gif)

```
"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|scss)$": "<rootDir>//__mocks__/fileMock.js"
    }
```

Freakin SCSS... Alright, let's try it again.

![](https://thepracticaldev.s3.amazonaws.com/i/9e80q7snlwkjtt5pkxvt.jpeg)

This feeling right here...

![](https://media.giphy.com/media/nDMyoNRkCesJdZAuuL/giphy.gif)

Is why I am a developer.

You can check out my itsy bitsy org at https://github.com/WrippleFoss/
We are trying to build an open-source platform for something :wink: _secret_.
You can also join the discord channel using this [link](https://discord.gg/7TahF4D).

Fave is hiring, apply to https://careers.myfave.com/

Until next time...

![](https://media.giphy.com/media/nqYXNf3aK6EvK/giphy.gif)
Newbie- please assist
Tags: help
Published: 2019-08-03 12:56:45

How do I add this to my "profile"? Complete newbie please help.

<a href="https://dev.to/jillybnusa">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="J.H.'s DEV Profile" height="30" width="30">
</a>
more links still left in my browser (weekend links 2)
Published: 2019-08-03 12:52:51

---
title: more links still left in my browser (weekend links 2)
published: true
description: 
tags: 
---

http://www.ulisp.com/show?2NWA Another lisp link with ray tracing and a hardware component too. Really amazing.

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Introduction - Do you want to help mozilla out? Here is a doc that says how.

https://armin.dev/blog/2019/08/supporting-browser-extension-developers/ - I have written a few browser extensions. I have not given it a lot of thought... there are a few extensions that are really being used. Interesting stuff.

https://robatron.github.io/1440-clock/ - I have been fascinated with clocks and time for most of my life. I have a clock I made sitting beside my desk powered by a Raspberry Pi Zero. This looks lovely.

https://itnext.io/the-anatomy-of-web-components-d6afedb81b37 - Still fascinated with web components. :)
Java:Understanding and Future Scope
Published: 2019-08-03 12:25:19

This is a very simple and easy to use <a href="https://www.sevenmentor.com/java-training-classes-in-pune.php" rel="dofollow"> Java Language </a>  It is a very popular language used in the software development field. We know the various software like Windows Application or Web Application is made using Java. Due to its Platform independent feature, it is widely used all over the world. The security feature of Java due to byte code make this language as a secure language. It has a large scope in Software. As every device use java to run Applications.

Scope of Java

Today we use Hadoop to solve Big Data Problems, Which also uses Java mostly to make programs on Map Reduce. In Java, everything is an object. If we talk about array in java, the array is also an object in java. A string is a class in Java, we create string object to assign values to the string object. Without creating the object we can not access the features of the class. The array is a class in Java, so there is a number of built-in methods in Array class which we only call on an array object. So we can say that it is a purely Object-Oriented Programming Language and getting <a href="https://www.sevenmentor.com/java-training-classes-in-pune.php" rel="dofollow"> Java Training Course </a> from experts will be always beneficial.

Garbage Collection

In terms of memory, Java has the concept of garbage collection which makes Java as a memory saving Language. A garbage collector is a program which is called by JVM (Java Virtual Machine) . Garbage collector destroys the space allocated by unused objects in the program.

 Portable

Java is portable. It can run on any platform, So Java is platform-independent language. In java, when a program is compiled, the byte code is generated. This byte code is platform-independent code and can be run on any platform like windows, Linux, Mac, etc. JVM is platform dependent and fro every platform JVM is different. The same byte code is shared among all the platforms and can be run on a variety of machines. This makes Java as a Platform Independent Language. That’s why Java is so popular language.
 

JVM is Java virtual machine that is an abstract machine which runs the byte code, we call it interpreter.JRE (Java Runtime Environment) is the implementation of JVM. JRE provides the environment to run the java program. JDK is the Java Development kit. JDK consists of JRE and JVM. JDK provides a programmer the facility to develop Java Program. Without JDK it is not possible to develop programs in Java. In other words, JDK is the collection of JRE and other Development tools like javac and java.

Java is a secure Language. Byte code makes the java program more secure. Byte code is the object code that can not be read by a human. So you need JVM to understand byte code.
How to check if an online service is good
Tags: internet, checkscamornot
Published: 2019-08-03 12:39:52

---
title: How to check if an online service is good
published: true
tags: Internet,check scam or not
canonical_url: https://kevinhq.com/how-to-check-if-an-online-service-is-good/
---

At this age, we often use an online service to fix our problems. Whether it’s a blogging service like WordPress, or a web hosting to host our blog, or a VPN to protect our privacy, we need to admit that we are now more dependent on such services. There are many times we need to… [Continue reading »How to check if an online service is good](https://kevinhq.com/how-to-check-if-an-online-service-is-good/) ![](http://feeds.feedburner.com/~r/kevinhq/~4/yMybMJNHGBs)
How to unfork a repo on GitHub
Tags: github, git
Published: 2019-08-17 18:59:47

---
title: How to unfork a repo on GitHub
published: true
tags: github,git
canonical_url: https://nickymeuleman.netlify.com/blog/unfork-github-repo/
---

> TL;DR: **2 steps**: Rename the repository. Import the renamed repository under the original name.

Sometimes a repository on GitHub started off as a fork.  
You now want to break that connection.

Forks on GitHub come with a few special behaviours, like the issues tab not being enabled by default.

![no issue tab](https://nickymeuleman.netlify.com/static/e54f9389ab54dc92af5a1049f2346a2d/b9e4f/no-issue-tab.png)

## 1. Rename your repository on GitHub

Go to the repository on GitHub, find the **Settings** page and rename your repository. (Don't worry, you'll get to keep the original name.)

![rename your repository on Github](https://nickymeuleman.netlify.com/static/730e62fe508381b39b386524f5ef5321/1f44b/rename.png)

This freshly renamed repository is still marked as a fork!

![repository marked as a fork](https://nickymeuleman.netlify.com/static/2edab85f41cc900f2fbdb388d15b35b2/1654f/repo-marked-fork.png)

## 2. Import the repository

GitHub provides a way to import repositories.

![import repository feature](https://nickymeuleman.netlify.com/static/b6e34f2ae3fa42f7008020e724ec8ea5/1b606/import-repo.png)

Grab the link to clone the repository you just renamed and enter it.

> NOTE: Provide the https link, the SSH one won't work

For the name, enter the **original name** of your repository.

![import screen](https://nickymeuleman.netlify.com/static/342abcb4d68ec7737606c95eac1e8846/b9e4f/import-with-original-name.png)

After a while the "new" repository will be ready.
If there is an e-mail address linked to that GitHub account, an e-mail will also notify you of success.

![Successfully imported the repository](https://nickymeuleman.netlify.com/static/44dc88e0bab3407fa962332f71162085/b9e4f/completed-import.png)

## Enjoy your unforked repository

![unforked repository](https://nickymeuleman.netlify.com/static/6cba667e876aa0263879e2d4bd3e13c2/b9e4f/unforked-repo.png)

The git history is still there. 👍

The locally cloned project does not have to be touched.  
Pushing a change should work without intervention, since the remote url is the same as before.

Since this is technically a brand new repository, some things (specific to the GitHub web UI) were lost.
For example: pull requests, a description, the provided website url.

![an empty header for a description and website](https://nickymeuleman.netlify.com/static/aaddc041f774f20b5e9abd89486e6556/b9e4f/empty-description.png)
Kimai2: PDF エクスポート時の日本語文字化け
Tags: kimai, troubleshooting, garbled, japanese
Published: 2019-08-03 10:44:15

---
title: Kimai2: PDF エクスポート時の日本語文字化け
published: true
description: Kimai 2 で PDF エクスポートを行うと、日本語では文字化けが発生します。PDF エクスポートにおいて PHP の PDF 生成ライブラリ mpdf が使われています。こちらのフォント設定が不足していることが原因です。src 内のソースコードを変更することで対応できます。
tags: kimai, troubleshooting, garbled, japanese
---

[Kimai 2](https://www.kimai.org/) はタイムトラッキングのための Web アプリです。
MIT ライセンスの下、オープンソースで[公開](https://github.com/kevinpapst/kimai2)されています。

v1.0 で、PDF エクスポートを行うと、日本語では文字化けが発生します。
（Excel や CSV エクスポートについては、日本語でも問題無く出力できます。）

PDF エクスポートにおいて [PHP](https://php.net) の PDF 生成ライブラリ [mpdf](https://github.com/mpdf/mpdf) が使われています。
こちらのフォント設定が不足していることが原因です。

対応として、以下のように src のコードを変更することで、日本語でも文字化けせずに出力されるようになります。

`kimai2/src/Utils/MPdfConverter.php` :

```diff
- $mpdf = new Mpdf(['tempDir' => $this->cacheDirectory]);
+ $mpdf = new Mpdf(['tempDir' => $this->cacheDirectory,
+     'fontdata' => [
+         'sun-exta' => [
+             'R' => 'Sun-ExtA.ttf'
+         ]
+     ]
+ ]);
```
Why is streaming while you're developing not so popular?
Tags: javascript, webdev, beginners, discuss
Published: 2019-08-03 09:53:36

---
title: Why is streaming while you're developing not so popular?
published: true
description: 
tags: javascript, webdev, beginners, discuss
---

So streaming, in general, got very popular.
E-Sports and gaming streams are usually the most popular.
You can also find people just talking or answering questions.

But since streams go both ways, it is almost like pair programming.
Pair programming for me is one of the best things you can do to become a better coder. Also, you learn how other developers think!

Why do you think streaming for coding is not so popular?
Would you watch it?
How should it look?
General thoughts about this topic?

Please comment down below!

**It would really help me if you could do the following for me!
Go to [Twitch](https://www.twitch.tv/lampewebdev) and leave a follow for me! If just a few people would do that then this would mean the world to me! ❤❤❤😊**

**Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
React Routing Working Example
Tags: react
Published: 2019-08-03 09:12:38

---
title: React Routing Working Example
published: true
description: React Routing Working Example
tags: react, reactjs
---

Hello to all, here I am going to share the link, with that, you can get **React Routing Working Example:**


[React Routing Working Example](https://therichpost.com/react-routing-working-example)

Thank you
Rust log: First chapter
Tags: rust
Published: 2019-08-03 08:56:14

It's my first step into rust, I have been watching rust for a while and wondering how does anyone get to learn this, the syntax coming from JavaScript / Typescript is quite bezare. 

I wrote a WASM project which is 90% done Lua VM for node Js, I spent more time learning modern c++ than I did actually writing any Lua. This was enormously challenging and fun.

Although that project is important to me, it's not gona help anyone unless Lua has an upsurge or a game studio wants to make a game in node and Lua. I will finish this project but I'm also working on Jess and Tess, after a very good reaction here from the community I have started writing a cli for Jess in rust.

My first day I used a framework called clap to parse args, I don't have time to write some cli library, I need to get an MVP shipped. I got stuck pretty quickly trying to validate if the Jess file existed. It was frustrating because in node I could do this in one line and handle lots of edge cases. Rust it turns out prevents you from writing poorly memory managed code and generally bad code, but if you're learning, this is a nightmare. I found myself shouting "I hate you rust you fantastic peace of s***!", because in the end it wasn't rust that was at fault it was me.

I sat down and learned about borrowing and ownership, Now things are heating up armed with that knowledge, I highly recommend you do the same because it's not that painful, I have made a working cli that has design principles I wouldn't have even thought of had it not been for the strictness of rust. I'll keep you posted how things progress.
How I optimized my use of git
Tags: git, productivity
Published: 2019-08-03 08:44:38

---
title: How I optimized my use of git
published: true
description: This list of just one alias really impressed me, the first one is awesome!
tags: git, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yy5zvdg798siyshxqzdp.jpeg
---

> _Small details can make a huge difference_ -- Somebody at some point, I guess

Add an alias in your shell to  use `g` for `git`. You will save a lot of typing at the end of the day.

```
# in your .bashrc or equivalent
alias g='git'
```

So now you will do `g pull` instead of the extremely verbose `git pull`.

As bonus points, some bits from my Git configuration. All the following is in `~/.gitconfig`:


* Using a global `.gitignore` with the usual suspects (.DS_Store, Thumbs.db, etc.)
```
[core]
excludesfile = ~/.gitignore-global
```

* I always want to `pull --rebase`, so I have it enabled by default:

```
[pull]
    rebase = true
```

* Git comes with a pretty much unknown autocorrect feature. If you mistype some command, it will execute it after some configured time. Enable it with the tenths of a second to do so:

```
[help]
    autocorrect = 5 
```

* And my current list of git aliases, in case it is inspiring to somebody. They print the actual command to do not forget what I am doing:

```
[alias]
    s        = !echo 'git status -s' && git status -s
    aa       = !echo 'git add .' && git add .
    c        = !echo 'git commit -m' && git commit -m
    co       = !echo 'git checkout' && git checkout
    amend    = !echo 'git commit --amend --no-edit' && commit --amend --no-edit
    amendall = !echo 'git add . && git commit --amend --no-edit' && git add . && git commit --amend --no-edit
    syncwith = !echo 'git pull --rebase origin' && git pull --rebase origin
    lg       = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)%Creset' --abbrev-commit
```

Final advice: try to optimize what you do over and over again during the day.
How to integrate GraphQL into Laravel with Lighthouse
Tags: laravel, graphql, lighthouse
Published: 2019-08-03 07:56:25

GraphQL is going down well with developers.
And I'm in love with it because it allows me to receive only data I really need.
You are no longer distracted by inessential information with GraphQL since the client-side takes the initiative in deciding what data is received on the front-end.

And I wanted to share my first exposure to it with you.
If you already used it in your project, please tell me your experience in the comment section below.

Let's get started!

I installed Lighthouse which is a PHP package to serve a GraphQL endpoint from a Laravel application using this command.
```
composer require nuwave/lighthouse
```
And I published a config file.
```
php artisan vendor:publish --provider="Nuwave\Lighthouse\LighthouseServiceProvider" --tag=schema
```

This is optional but I highly recommend that you install the package laravel-graphql-playgroung.
```
composer require mll-lab/laravel-graphql-playground
```

Now you can find the default schema in graphql/schema.graphql.

If any tables haven't been created in your application, run your migrations and insert records into your database.


Click the button below to test your GraphQL API.
```
http://localhost:8000/graphql-playground
```
It's time to write a simple query to fetch user data.
```
{
  user(id: 1) {
    id
    name
    email
  }
}
```
The result is like this.
![](https://thepracticaldev.s3.amazonaws.com/i/xaaenbzoycpoyi5jbgyy.png)

As you can see this result, you call the shots over what you receive from the API.

Now you are ready to dig deep into GraphQL and Lighthouse.

I'm so hyped about what I will create with GraphQL.
Repository madness
Tags: modulatwo, basic, programming, pascal
Published: 2019-08-03 07:38:31

There are now 21 projects to my repository. Aside from [Lychen](https://github.com/axtens/Lychen) and [j](https://github.com/axtens/j), these are mostly written in Modula-2, a Wirth-family language. I had a long and deep relationship with Modula-2 during the early 1990s and I miss it still.

You may find something of interest there. It's all under a permissive MIT license. 

There are many more to add and in other languages as well, including xBase (Clipper).
how to handle common error pages in react and axios?
Tags: react, axios
Published: 2019-08-03 07:30:37

---
title: how to handle common error pages in react and axios?
published: true
description: creating common error pages like 503,501,403,... in react with axios 
tags: reactjs,axios,react
---

in our project , we had a problem to control common error pages using axios and show proper error pages like 404 or maintenance mode pages. 

in our user flow designs , react has to show the user , a maintenance page or some other error pages when responses status codes are 503 or etc. 
after some searches with my friend , we found that axios has an interceptor .

> You can intercept requests or responses before they are handled by then or catch. [axios](https://github.com/axios/axios#interceptors)  


but we had a problem implementing that in our project, we have 40 requests and it's not very rational to edit all of services to handle error and change router . 

so then i use react HOC technique to handle this problem , so my solution is something like this :

```
import React, {useEffect} from "react";
import axios from "axios";

const checkRequests= Wrapped => {
    function CheckRequests(props) {
        useEffect(()=>{
            axios.interceptors.response.use(function (response) {
                // Do something with response data
                return response;
            }, function (error) {
                switch (error.response.status) {
                    case 503 :
                        props.history.push('/503') //we will redirect user into 503 page 
                        break
                    default :
                        break
                }
                // Do something with response error
                return Promise.reject(error);
            });
        })

        return (
            <Wrapped {...props} />
        )
    }
    return CheckRequests
}

export default checkRequests

```

and then i use it in my app js:

```

import React from "react"
import CheckRequests from "./HOC/CheckRequests"

function App(props){ ... }

export default checkRequests(App)

```

so in every request that has been called from axios , error handling will work . 

it was my solution . I like to use yours to .
Which is the best company for work as full-stack developers?
Tags: fullstack
Published: 2019-08-03 06:08:42

A full-stack developer is someone who is competent to deal with the technologies behind the entire application stack—that is, the different layers of technologies that make up a modern application. so how I find a full-stack developer for my project, which company provide me best full stack developer, please consult me about the company.