teleren/devto huggingface dataset:
Diary - React Native TESTING !@#?
Tags: testing, reactnative
Published: 2020-01-04 08:59:08

Well, this will be random.

I am currently trying to add Jest to my one-year-old mobile apps. It has been developed and improves constantly and now to a point where I want to have solid testing in my skill set.

I was trying an automated test with Detox then I hit the problem that it is so difficult to solve the problems.

- I can't tap on system permission popup on IOS.
- I can't make it work with android.

Then I step back a little bit.

I have tried to use Jest with react native before but the project stated and timing seem to be too short and have to skip unit "testing".

But now I am ready to tackle the problem again.

I started with small and little cute components and it works!

SNAPSHOT - Huray!

then I step up a bit and work with "Home" component. It doesn't work YET.

what I have done so far is configuring jest and mock function left and right then I hit the big function which I am right now too lazy to mock. I am looking for cleaner solution rather than mock my way out to freedom.
Chaining with the Query Builder in Laravel
Tags: laravel, query, builder
Published: 2020-01-04 14:48:59

The query builder makes it possible to chain methods together to, you guessed it, build a query. At the end of your chain you’ll use some method—likely get()—to trigger the actual execution of the query you’ve just built.

https://codechief.org/article/chaining-with-the-query-builder-in-laravel
Laravel 6 - Follow Unfollow System Example From Scratch
Tags: laravel, follow, unfollow
Published: 2020-01-04 14:48:24

In this tutorial I would like to share with you how to implement a follow and unfollow system with PHP Laravel and MySQLi like Twitter and Facebook. In this features you will see a user can follow unfollow another user and you can see which users following you and how many followers you have. So in this lecture I will explain you step by step create follow unfollow system in laravel 5.8 application.

https://codechief.org/article/laravel-58-follow-unfollow-system-example-from-scratch
Laravel 6 - Like Dislike System Like Facebook Twitter
Tags: laravel, like, dislike
Published: 2020-01-04 14:47:49

In this tutorial I would like to share with you how to implement a like dislike system with PHP Laravel and MySQLi like Twitter and Facebook. In this features you will see a user can like a post and after liking it , user can dislike it also. So in this lecture I will explain you step by step create laravel like system in laravel 6 application.

https://codechief.org/article/laravel-58-like-dislike-system-like-facebook-twitter
Binding Data to Views Using View Composers in Laravel

Tags: laravel, view, composer
Published: 2020-01-04 14:47:05

Thankfully, there’s a simpler way. The solution is called a view composer, and it allows you to define that any time a particular view loads, it should have certain data passed
to it—without the route definition having to pass that data in explicitly.

https://codechief.org/article/binding-data-to-views-using-view-composers-in-laravel
How to implement post view counter in laravel?
Tags: laravel, postview, postclick
Published: 2020-01-04 14:45:51

Today we are going to know how to implement Post/Page views count using Laravel . We can say it is going to be click counter or single post visitor counter . We will create this traffic counter using Laravel. If a user visits a page or post then our Database field name view_count is automatically incremented . Hope you enjoy this . When a user can click a single post link and will go to single post page controller then we will just increment our database field view_count. See below code -

https://codechief.org/article/how-to-implement-post-view-counter-in-laravel
How to create dynamic xml sitemap in laravel ?
Tags: laravel, sitemap
Published: 2020-01-04 14:45:15

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to more intelligently crawl your site. A sitemap tells the crawler which files you think are important in your site, and also provides valuable information about these files: for example, for pages, when the page was last updated, how often the page is changed, and any alternate language versions of a page.

https://codechief.org/article/how-to-create-dynamic-xml-sitemap-in-laravel
jQuery Ajax Crop Image Before Uploading via Croppie Plugin in Laravel
Tags: laravel, jquery, crop, image
Published: 2020-01-04 14:44:05

Now i am going to show you an amazing thing for web application . Now we are going to learn how to crop image before uploading to the server. If you don’t konw what is crop image just visit and read it Cropping (image)

I was thinking how can i do it easily, i decide to do with my own jquery but after write some code. i thought it will take time and need to write large amount of code. but after some time, finally decide to use any one jquery plugin i can done crop image and also show preview of profile image. After google search i found Croppie plugin. so i checked website of Croppie plugin and i done to with it.
https://codechief.org/article/jquery-ajax-crop-image-before-uploading-via-croppie-plugin-in-laravel
Adding Toastr Notifications in Laravel
Tags: laravel, toastr
Published: 2020-01-04 14:42:28

Toastr is awesome JavaScript library that help to display message in the form of notification, the message could be type of info, success, warning or error . When a user signs up on your website or performs an action that needs a notification. A good option is to use the ToastrJS library. 

But in this tutorial i will use this packages  to complete Toastr notification system in our laravel app. You can read this documentation also. i thinks it is pretty awesome and simple also easy to customize visualization

https://codechief.org/article/adding-toastr-notifications-in-laravel
Update Password Checking Old Password in Laravel
Tags: laravel
Published: 2020-01-04 14:42:01

Update password in Laravel
Changing password is an essential for every software you can take any example from the live applications they all have change password option for there users so that user can easily change there login password.

I assume that you have already implemented the login register and email verification tutorial on your end and now want to have change password feature added to the same application, then let’s get started. 

https://codechief.org/article/update-password-checking-old-password-in-laravel
How to Add CKEditor with Image Upload using KCFinder in Laravel
Tags: laravel, ckeditor, kcfinder
Published: 2020-01-04 14:41:15

Do you want to install CKEditor in Laravel? In this article, we are going to show you how to install and use CKEditor in Laravel.Now we are going to show how to use and install and CKEditor in Laravel, so first we have to discuss about Laravel package for CKEditorlibrary. If you wish to use CKEdiotr apart from Laravel, then please check the official website for CKEditor.

https://codechief.org/article/how-to-add-ckeditor-with-image-upload-in-laravel
Save time and money by collaborating
Tags: teamwork, team, productivity, codereview
Published: 2020-01-04 14:41:09

---
title: Save time and money by collaborating
published: true
description: Save time and money by collaborating
tags: #teamwork #team #productivity #codereview
---

I'm sure everyone who has ever done code reviews will have bumped into a situation where the design of the code is not good enough. Even worse, many times the code took a couple days to develop and we've already invested quite a lot of time to build a solution. 

What do you do when this happens?

Let it slide and allow the bad design eat the productivity in little pieces for the coming months? 

No.

You can point out those design problems and hope the author is able to rewrite the design in a timely manner. But that requires you to check up on the pull request later which causes context switching between your own development tasks and the review ultimately destroying your productivity for a time being.

Even better would be to call a meeting and solve the problems by pair programming with the author. Fix the issues immediately, commit, approve, merge and move on with our lives. But this is not always easy if there's no prior experience working with the other developer. Maybe the developer rejects the ideas of improving the design.

Whatever we decide, we're already in an awkward situation.

**This doesn't have to happen though.**

As developers we have to have a sense of smell for bad design. We have to be able to see the trade offs in the choices that we make. That's the first step.

If i find myself in a situation where i can see that my design has problems but i don't see the alternatives i must raise my hand and ask my coworkers to collaborate with me. The worst thing i could do is try to solve this problem alone. This would most likely take a lot more time and the result would still suck.

**When i'm 1-2 hours in to development:**

- I already know something about the problem i'm solving.
- I haven't yet written that much code. We can try alternative approaches and experiment.
- Changing the direction is possible.

**When i'm 3 days in to development:**

- I'm already feeling the pressure to deliver.
- I'm already commited into the poor design i wrote.
- Changing direction may require me to discard the work done for the last 3 days.

Identifying the limits of my own knowledge is crucial. But also having that sense of smell to see that there has to be better ways and not ignore that feeling. Taking initiative early on to collaborate with other developers will save time and money. That's how real teams develop software.
Cloning a BitBucket Repo
Tags: bitbucket, clone, git, ssh
Published: 2020-01-04 14:22:56

### Introduction

I have a repo called 'my-new-repo' on BitBucket. I'm going to walk you through the steps I took in order to clone that repo onto my machine.

#### Steps
First, set up an rsa key pair.
```
$ ssh-keygen
Generating public/private rsa key pair.
```

You have to assign a name to the key. You could choose to leave this section blank to give it the default name; it will also get saved in the default location. I chose to name mine 'wsl-default' and saved it in my current working directory.
```
Enter file in which to save the key (/home/yamikani/.ssh/id_rsa): wsl-default
```

For the purpose of this walkthrough, go ahead and leave the passphrase empty. The interaction should look something like this

```
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in wsl-default.
Your public key has been saved in wsl-default.pub.
The key fingerprint is:
SHA256:TosAyiMu6LNeibN4K+aGxwIXGzWgLsuL5peR+isxbc4 yamikani@LAPTOP-HBMDC5G1
The key's randomart image is:
+---[RSA 2048]----+
|  ..             |
| .  o            |
|. .. .           |
|o.o.             |
|++.+o   S        |
|B+==.. + .       |
|*BBoo . o        |
|OBOE             |
|X&B+.            |
+----[SHA256]-----+
```

List your directory to make sure the key files are there. If you 
```
$ ls
wsl-default wsl-default.pub
# use 'ls ~/.ssh' if you used the default
```
Your public key file ends in '.pub', the other is your private key.

Next, start the ssh-agent and add your private key to it
```
$ eval `ssh-agent`
Agent pid 325

# adding private key to ssh-agent
$ ssh-add ./wsl-default
Identity added: ./wsl-default (./wsl-default)
```

Use cat to show the content of your public key. Copy the content and **add a new ssh key to your BitBucket account**.

To do this, click on your avatar at the bottom left of the BitBucket dashboard. Then click on 'Bitbucket settings' and then navigate to 'SSH Keys' under the 'Security' section. Go ahead and click 'Add Key'. Give your key a distinct label and paste the contents you copied into the 'Key' section. Hit save.

To confirm that you have correctly configured your Bitbucket for ssh, run the following command on the terminal:
```
$ ssh -T git@bitbucket.org
Warning: Permanently added the RSA host key for IP address '<ip_address>' to the list of known hosts.
logged in as yamikani
```

**You can go ahead and clone our repository**. To do this, open your repository's page in BitBucket and click on 'Clone'. Make sure the dialog reads 'SSH' at the top right corner before you copy the clone command. Copy and paste the command in your terminal and run it.
```
$ git clone git@bitbucket.org:yamikani/my-new-repo.git
Cloning into 'my-new-repo'...
remote: Counting objects: 12, done.
remote: Compressing objects: 100% (8/8), done.
remote: Total 12 (delta 1), reused 0 (delta 0)
Receiving objects: 100% (12/12), done.
Resolving deltas: 100% (1/1), done.
```

And there we have it.
Hack In The North 5 | IIIT Allahabad 
Tags: development, hackathon, events, techtalks
Published: 2020-01-04 14:39:41

Greetings developers,

Hack In The North is the collaboration of programmers, designers and inventors to code, design and build innovative solutions that tackle real-world problems.

We are the core team organizers of Hack In The North 5, IIIT Allahabad to be held in March 2020. Hack In The North 5 is the fifth iteration of what started out as an effort from unorthodox students to allow student developers to have a platform where they can showcase their ideas and skills.

As we move closer to the commencement of the hackathon, we take it upon ourselves to bring you few words by hackathon veterans and domain experts in the hopes of starting a culture of learning and building through careful inspiration. 

In the following weeks leading up to the hackathon, we will be publishing blogs to help the aspirers get a better broader picture of our shared goal (to make you a better developer xD).

For more details you can kindly check out the Hack In The North website :
www.hackinthenorth.com

Our Facebook page: https://www.facebook.com/HackInTheNorth/

To register a team, simply head to our website https://www.hackinthenorth.com and click on the “Apply with Devfolio” button - in case of questions, check out the FAQs and feel free to reach out to us on the page or via comments!

Email us your queries, we are happy to help: hackinthenorth@iiita.ac.in
Laravel 6 Notification Example Via Queue From Scratch
Tags: laravel, notification, queue
Published: 2020-01-04 14:39:02

In previous tutorial we have seen how to send notification in laravel. If you don't yet read this article then read this below article But we know that it has some limitations. So now we will see how to send notification in laravel using queue. It is almost same just we have to change something in our code from prevoius example.

https://codechief.org/article/sending-notification-via-laravel-queue-example-from-scratch
Your favorite online chart and embedding them to dev.to
Tags: discuss, online, chart, embedding
Published: 2020-01-04 14:37:00

---
title: Your favorite online chart and embedding them to dev.to
published: true
description: How to embedding your favorite online charts to dev.to
tags: discussion,online,chart,embedding
---


First of all, here are some links to embedding charts online:

- [How to Embed a Live, Refreshable D3.js Chart into GitHub Pages](https://www.flex.io/blog/embed-live-refreshable-d3-js-chart-github-pages) 
- [How To Create a Plotly Visualization And Embed It On Websites
](https://towardsdatascience.com/how-to-create-a-plotly-visualization-and-embed-it-on-websites-517c1a78568b)
- [Embed an Iframe in GitHub Pages | Data Visualization for All
](datavizforall.org/iframe-github.html)


However, after carefully examining the situation, I found that we cannot do any of above here at dev.to -- my conclusion is that people are not able to embed online charts to dev.to yet, not even HTML iframes, see:

{% github https://github.com/thepracticaldev/dev.to/issues/1445 %}

However, charts are the most powerful way to convey ideas -- they say a picture is worth a thousand words. 

Hope we can have online charts in our posts soon.
HELP WITH Bluetooth Printer for IonicPWA/Angular7
Tags: angular, pwa, beginners
Published: 2020-01-04 14:28:17

Need some help, I currently developed a Ionic PWA app using Ionic Framework and Angular, got this old bluetooth thermal printer from my client and my last resort is to create a hybrid app, but i wanna know if there are some work around for the Web app to access the bluetooth printer. Thank you in advance!
I made a Hack Quiz in 48 hours.
Tags: javascript, webdev, firebase, database
Published: 2020-01-04 14:12:41

##Hack This Quiz

In short, I wanted to challenge myself and I made a hacking quiz in 48 hours with Vanilla JavaScript and Firebase. 

Look at it here: https://hackthisquiz.firebaseapp.com/

####How to play?

Basically, it's really simple.
You need to insert a password to move forward and collect all the points.
You are given a paragraph of text and occasionally a hint which helps you and directs you toward finding the correct password. 

Use any means and knowledge necessary in order to find a password! 

####Why?

Obviously not to practice UX and UI. :D 
The application has a terrible UX and UI design, mainly because I wanted to focus on learning MVC in Vanilla JavaScript and most of how to handle Firebase for database management, user management, deploy and hosting purposes. 

+ I want to challenge myself in 2020. to learn as much as I can about certain technologies. Coming up and completing these little challenges help me stay alert and sharp. 

####Closing words

Feel free to play it and make sure to tell me how'd you like it!
I am opened to have a meaningful discussion about improvements, questions, UI/UX or any kind of advice you can think of.

Let me know in the comments below if you've played it and let's chat about it!

Have fun! \m/
Stay awesome!
Vim: More submatch tricks (and regexes)
Tags: vim, regex
Published: 2020-01-04 13:44:05

---
title: Vim: More submatch tricks (and regexes)
published: true
description: 
tags: vim, regex
---

# How to search and replace in Vim with submatch values
+ https://stackoverflow.com/questions/43594662

I normally learn a lot on stackoverflow and this comes from it once more

Let's say you have to turn this:

    <form>
        <input id="firstname" value="" />
        <input id="lastname" value="" />
        <input id="email" value="" />
    </form>

into this:

    <form>
        <input id="firstname" name="firstname" value="" />
        <input id="lastname" name="lastname" value="" />
        <input id="email" name="email" value="" />
    </form>

To match only the value after the first equal sign

    /id=\v\zs(".{-}")

In our above search we have some tricks, the first one is that we only start the very magic after the equal sign, because on vim magic search the equal needs scape. The second trick is using a non-greedy search, for more on this try `:help non-greedy`. The third trick is using our beloved `\zs` an unique vim regex feature that says: Beloved vim, use in our substitution only what comes after this point. The oposite is: `\ze`. For more try: `:h \zs`. The final trick is using the amper sign `&` that represents the whole matched pattern.

To apply changes only over a specific paragraph use:

    vip  ............... visual inner paragraph

And the final command becomes 

    :'<,'>s//& name=&

Notice the double slashes another trick that says to vim: Beloved vim: Don't bother copying the last search to my command line command, just use it as if I have typed it. This trick allows me to separate my search from my substitution command, creating a more concise and easy to read/learn command.

## Translating part of a line
+ source: https://stackoverflow.com/questions/61176237/
Imagine the following situation: You have a program with some comments in a foreign language like this:

```python
some_variable = True #循迹红外传
```

So you catch the commenting part with this regex:

```vim
    /\v([^#]*&[^"']|^)\zs#.+\ze
```

And you happen to have the program [trans](https://github.com/soimort/translate-shell) installed on your system. You can translate the Chinese part with:

```vim
:.s/\v([^#]*&[^"']|^)\zs#.+\ze/\=system('trans -b :en "'. submatch(0) . '"')
```

It is even easier to break down the solution into two pieces: 

1 - Search 
2 - Substitution 

```vim
   /\v([^#]*&[^"']|^)\zs#.+\ze
   :.s//\=system('trans -b :en "'. submatch(0) . '"')
```

## More reading
I have written another similar post with more stuff, see it [here](https://dev.to/voyeg3r/formating-dates-with-vim-substitutuions-4dof).
How I Got Web Design Awards In Early 2020
Tags: website, design, awards
Published: 2020-01-04 12:33:58

In the middle 2019, I submitted my website to [Web Design Awards](https://www.web-design.co.za/getAward.php). Few days ago, I got an email from Web Design Team. The message is about announcement that in early 2020, my website will be [displayed as a winner](https://tiny.cc/web-design-awards).

![Bayu Angora Awards](https://i.pinimg.com/originals/fd/dd/2e/fddd2e3f4849bb45ba0c5855cfc3331a.jpg)

I know there are so many great websites submitted every years. But I feel optimist that [my website](https://angora.me) is qualified enough to displayed on Web Design Awards, at least as a nominee. Because Web Design Awards is not only about aesthetic, but also about speed and user friendliness too. 

![Web Design Awards](https://i.pinimg.com/originals/38/66/a2/3866a268fff8bc39161d4c352d801b49.jpg)

[My website](https://angora.me) is very fast and simple. Load page is about your blink eyes. Very secure and responsive. No bloated script, no animation, no heavy images. I only use simple CSS with minimal JS for darkmode button. I got perfect score on [Lighthouse](https://tiny.cc/-lighthouse) and [Validator](https://tiny.cc/-validator). Also I got A+ grade on [Security](https://tiny.cc/-securityheaders) and [Observatory](https://tiny.cc/-observatory).

![Bayu Angora Website](https://i.pinimg.com/originals/e0/f1/e0/e0f1e03839128fac786c35fd876e8fb8.jpg) 

My principal for my website is keep it simple. User friendly on every devices is a must. Avoid every bloated things that you don't need. And prioritize function rather than redundant decoration.