teleren/devto huggingface dataset:
Find code duplication
Tags: webdev, tutorial, codequality, frontend
Published: 2020-07-10 07:45:27

This is part three of seven.

# jsinspect, services and other shenanigans

If you have ever worked on a project that has been going on for 5 years or longer, you know that multiple people have worked on it. Those who have on-boarded you unto the project don't even know the people anymore who started the project. Code styles and the way of how things are done in the project have changed multiple times.

For that reason there is a lot of code in the project that might just have been duplicated or have similar functionality, but uses different settings. An example would be if you have a swiper in your project, and they only differ in the items they display per slide. Here is an oversimplified example (of something we had in our project _multiple_ times)
Swiper1:
```javascript
class SwiperDirective {
    constructor($element, SwiperGenerator) {
        Object.assign(this, {
            _$element: $element,
            _SwiperGenerator: SwiperGenerator,
        });
    }

    $onInit() {
        this._initSwiper();
    }

    _initSwiper() {
        const swiperOptions = {
            slidesPerView: 1,
        };

        this._SwiperGenerator.init(
            this._swiperContainer,
            swiperOptions)
            .then((swiper) => {
                this._swiper = swiper;
                // do some stuff
            });
    }

    // some important functionality here
}

angular
    .module('someModule')
    .directive('ddSwiper1', function ddSwiper1() {
        return {
            scope: true,
            controller: SwiperDirective,
            controllerAs: 'swiper',
            restrict: 'A',
        };
    });

```

Swiper2 is pretty much the same, but has different options:
```javascript
const swiperOptions = {
    slidesPerView: 3,
};
```

One tool that helped with this problem (besides knowing the code base and refactoring) was [jsinspect](https://github.com/danielstjules/jsinspect).
It is a nice command line tool with a lot of options, that will automate discovery.

Just install it globally `npm install -g jsinspect`
and run it on your codebase `jsinspect --ignore "test" ./path/to/src`.
After that you can always fine tune with the options that are provided to fine tune the result.

One thing I really recommend, really for any project: **KNOW YOUR CODEBASE!**
It will help you make better decisions and to not duplicate already existing code.

# Coming up next
- uglify you private methods/members at build time
Dynamically Generated Github Stats For Your Profile ReadMe
Tags: showdev, github, api, statistics
Published: 2020-07-10 07:44:35

Hey guys! i hope you are doing well. 

Yesterday after seeing that lot of people on twitter are creating their Github profile Readmes i thought i should do something cool & unique, so i created this ->

### Github Readme Stats

### Features
- [GitHub Stats Card](https://github.com/anuraghazra/github-readme-stats#github-stats-card)
- [GitHub Extra Pins](https://github.com/anuraghazra/github-readme-stats#github-extra-pins)
- [Top Languages Card](https://github.com/anuraghazra/github-readme-stats#top-languages-card)
- [Themes](https://github.com/anuraghazra/github-readme-stats#themes)
- [Customization](https://github.com/anuraghazra/github-readme-stats#customization)

{% github anuraghazra/github-readme-stats %}


Github readme stats allows you to simply add a markdown image link and it will show you realtime stats for your github account.

```md
![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
```
And the cool thing is since it's just an image you can embed it anywhere even on Dev.to posts!

Live Demo:

![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&v=1)

Pretty neat isn't it? Try it out right now on your profile readme too! :D

After seeing that people liked the `Github Stats Card` idea i created `Github Extra Pins` 

### Github Extra Pins
Github extra pins allows you to pin more than 6 repositories in your profile by using github readme profile.

**Yey! you are no longer limited to 6 pinned repos**

```md
[![Dev.to](https://github-readme-stats.vercel.app/api/pin/?username=thepracticaldev&repo=dev.to)](https://github.com/thepracticaldev/dev.to)
```

Live demo:
[![Dev.to](https://github-readme-stats.vercel.app/api/pin/?username=thepracticaldev&repo=dev.to)](https://github.com/thepracticaldev/dev.to)


### Top Languages Card

```md
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
```

Live demo:
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

Check out the [docs to learn more](https://github.com/anuraghazra/github-readme-stats#github-extra-pins)  



That's it :D
I hope you guys liked the project. And make sure to give it a star on [Github](https://github.com/anuraghazra/github-readme-stats)


## Featured By Github! 

{% twitter 1286724102099816448 %}

#### Tweets

Github Stat Card
{% twitter 1281178695709814785 %}

Github Extra Pins
{% twitter 1281280944641470464 %}
3 Effective Strategies for Dealing with COVID-Induced Construction Labour Shortage
Tags: costcontrol, softwareinconstruction, zimanager
Published: 2020-07-10 07:25:55

The COVID-19 situation has brought unprecedented challenges for the construction industry. The biggest among these challenges is the sudden and acute shortage of skilled labour in the segment. While a large proportion of workers have migrated to their hometowns, others are apprehensive about returning while the pandemic is still at large. So it makes sense to have a proper plan to deal with labour shortage if you want to get your projects on track now as the restrictions are easing out and work is resuming. Here are some strategies that you can rely on.

__Prioritise Worker Safety__

Right now, nothing is more critical than workforce safety, and the fact that you are willing to go the extra mile could be the deciding factor to get people back to work. Implementing social distancing and effective sanitation practices are essential. You should consider spending on fogging and sanitising equipment, even if it increases your expenses. If you are using [cost control software in construction](https://www.zepth.com/project-cost-control
), you will probably be able to save up elsewhere on the project. So spending a little extra on worker safety is worthwhile. Apart from keeping your people safe, these measures will also keep your business compliant with the occupational regulations implemented amid the pandemic.

__Step up your Recruitment Efforts__

Since you may have lost a large number of qualified field workers during the lockdown, the only way you can make up for the shortage is by stepping up your recruitment efforts. You can tap the existing sources for getting the workers while it would also be a good idea to consult specialised agencies who can connect you with the qualified people. This would save time and effort, and you can get to work faster than you expect. It is also an excellent time to revisit the hiring and retention practices so that you can bring in new people and motivate the existing ones to stay.

__Automate Processes__

Thankfully, the construction technology segment is booming, and you can use a software solution to automate the labour-intensive processes. The zi manager offered by Zepth construction management software is one of the best instances of process automation with a virtual assistant. It can generate and share reports, send rule-based alerts and keep you updated in real-time with your project progress.

These smart strategies can go a long way in eliminating the labour concern during this tough phase. And you can keep relying on them later as well.
🌟 Review my open source repository 🌟
Tags: opensource, beginners, typescript, deno
Published: 2020-07-10 07:25:15

I am trying to build a community and gain contributors for the open source project:

[didi.land](http://didi.land)

Stabilizing this repository has been tricky for a mind maker upper, there are lots of moving parts, but I have tried to run this repository with projects, issues and pull requests.

The readme needs a little work, I'm also missing guidelines to contribute.

*beginners* tag has been added to this post to see what more junior developers thoughts are on if they would contribute based on the issues.

The one thing I really want to get out of this post is if nothing else, does everyone understand what didi is and when you might want to use it, and would you contribute based on the state of the repo.

To be totally transparent, I am dyslexic which I worry might put people off due to my English literature prowess 😬.

All feedback and constructive criticism welcome, stars also help!

Thank you and stay safe.
Why should you consider REST APIs for your application architecture?
Tags: beginners, api, rest, webdev
Published: 2020-07-10 07:21:52

Over time, standards for the design and development of web services came out in order to allow the integration of different systems and guarantee interoperability.

Web services can be classified by their type of architecture, among which SOA (Software Oriented Architecture) and ROA (Resource Oriented Architecture) stand out. The SOA-based framework is SOAP which lays its foundation on web services, while the ROA-based framework is REST which also lays its foundation on resources web services (Wagh and Thool, 2012).

Some experts say SOAP is not made for mobile devices with limited resources. SOAP messages have a heavy load, on the contrary, the messages of the REST framework are light load, which makes it the most suitable for use on mobile devices and networks.

In the last decade, a Software REST architecture style has become popular. RESTful Web Services are presented as a great alternative to SOAP-based services due to their simplicity and light nature, as well as the ability to transmit data directly over HTTP.

To provide scalability and interoperability to a platform, it is very important to implement a technological tool that can be reused within any other technological platform required. A software architecture oriented to the resources' recovery such as REST allows an application to be invoked as a service providing the ability to access its functions from another platform.

Regardless of the programming language or framework in which it is developed, a REST API allows us to communicate different systems and platforms thanks to the use of HTTP. Currently, these architectures can be implemented both in “On-Premise” infrastructure and in a public cloud such as Azure, AWS, or GCP and even in a hybrid model that combines the 2 approaches.

REST is positioned as an ideal alternative if you want to implement a cross-platform application since it has the potential to create scalable applications as well as the characteristic of low use of resources, essential characteristics for the performance of a web and/or mobile application.

**References**

Wagh, K., & Thool, R. (2012). A comparative study of soap vs rest web services provisioning techniques for mobile host. Journal of Information Engineering and Applications, 2(5), 12-16
Ubuntu Lumina Remix: Why we are skipping the 20.04 LTS
Published: 2020-07-10 07:03:46

Over the past several months of development, we have been trying to release the 20.04 edition of the Ubuntu Lumina Remix. Recently, we have had errors we cannot explain and have spent too much time attempting to fix. Ubuntu Lumina Remix will be skipping the 20.04 LTS so we can try to make it on time for the 20.10 mainline release of Ubuntu. We will not be coming back to build the 20.04 LTS version. We will be re-packaging everything for the 20.10 release and will be flipping our entire PPA system. All but one PPA will be deleted (the plain Lumina DE for work pushing to Debian), and we will make a new PPA for system packages. Hope this doesn't disappoint anyone. We will also be pushing back our RPi and Pine64 builds.
How I can get my first job as a front-end web developer?
Published: 2020-07-10 07:01:53

---
title: How I can get my first job as a front-end web developer?
published: true
description: My skills are HTML, CSS, Bootstrap, JavaScript, React, Redux. I know how to setup domain, host a website, publish an android, and ios application. I did 2 small freelancing projects.
tags: 
---
Connect your Java App with Power Apps
Tags: ama, powerfuldevs, powerplatform, java
Published: 2020-07-10 06:59:59

--- 
title: Connect your Java App with Power Apps
published: true 
description: In this session, Sandra Ahlgrimm and Dawid van Heerden @davestechtipps will connect a simple Spring Boot application generated by jhipster with Power Apps. 
tags: ama, powerfuldevs, powerplatform, java
--- 
![Powerfuldevs Speakercard with Sandra and Dawid](https://dev-to-uploads.s3.amazonaws.com/i/re5ybsg7o16to65ydrif.png)

#### #PowerfulDevs Conference
  
`THANKS FOR ATTENDING JULY 15:` 
[https://aka.ms/powerfuldevsconf](https://aka.ms/powerfuldevsconf) 
  
The [Powerful DEVs Conference](https://aka.ms/powerfuldevsconf) is the first virtual conference of its kind. We will showcase how developers can leverage the Power Platform to build applications faster and with far less effort. Connect with industry-recognized ProDev influencers, Microsoft Cloud Advocates, trusted and diverse community leaders, and members of the Power Platform Team. 
  
`BOOKMARK THIS FOR RESOURCES AND DISCUSSION WITH SPEAKERS` 
{% link https://dev.to/azure/powerfuldevs-conference-join-us-on-july-15th-online-fe3 %} 
  
Revisit this page during the event to engage in live (and post-event) discussions on those topics with both speakers and community. The speakers will be here for a live Q&A for at least 30 minutes immediately after their session concludes. After the event, come back to find additional slides, videos, and resources for this session. 
  
<hr/> 
  
## About This Session: 
  
`July 15, 2020: 08:30 PDT - 08:55 PDT` 
  
Power Platform provides next to the almost 400 preconfigured connectors for external tools via API. But also self-developed applications can be easily integrated with custom connectors. Let’s dive through the power of custom connectors of the Power Platform using OpenAPI to communicate with a Java Application. In this session I will connect a simple Spring Boot application generated by jhipster with Power Apps.

For more information about Power Apps please check [https://aka.ms/PowerCustomConnectors] (https://docs.microsoft.com/connectors/custom-connectors/?WT.mc.id=events_powerfuldevs-blog-sakriema "Documentation on docs.microsoft.com").

You can [find the recorded session here] (https://www.youtube.com/watch?v=-Xj7dJcp6ng). Feel free to keep asking your questions down here.
  
## About the Speakers: 
  
Sandra Ahlgrimm is a Cloud Developer Advocate @ Microsoft for Java. Follow [@skriemhild](https://twitter.com/sKriemhild) on Twitter. 
 
Dawid van Heerden is a Microsoft MVP for Power Apps and a true Power Apps Champion. Follow [@davestechtips]( https://twitter.com/davestechtips) on Twitter.
Developing React.JS/Rails App On Mobile Device(other than iDevices).
Tags: react, javascript, rails, css
Published: 2020-07-10 06:57:19

I have always had a random need, to turn anything small enough and powerful that has a screen, into a device that can run a full desktop OS. 

This obviously comes with limits and serious questions as to why anyone would do that to themselves, but I can’t answer the question part even for myself to be honest, other than I just like seeing what these devices are capable of.

The first start to this GRAND😬 adventure, is make sure you are using pretty much ANYTHING other than an apple device(and windows phone kinda), which is a sad day because I own/owned almost every type of major product that Apple sells and it would have be fun to do this across their different OS’s.

Ok now that you are not on an apple device, I found a website that walked me through the step to get the Google Play Store on a kindle and it might be useful in other situations where you are able to install and use APK’s. I don’t want to re-invent the wheel so you should just give the article a read here and it will help get the play store set up.
https://www.google.com/amp/s/www.howtogeek.com/232726/how-to-install-the-google-play-store-on-your-amazon-fire-tablet/amp/

Once you have downloaded the APK’s it’s time to install Termux. Termux is a great IDE and is full of functionality. 

I also want to point out here that as a coder I knew there would be people who had similar questions and problem I did while do with so I am going to be using a lot of external websites to reference but they are great reads and I don’t want to steal they’re hard work.

Once Termux is install we need to set up or work environment.
https://mbobin.me/ruby/2017/02/25/ruby-on-rails-on-android.html
This website Above will walk you through setting up most of your rails project but take what you need and there might still be issues with some gems in your specific case and the ruby version. 

Checkout your package.json file and change the ruby version to the correct version and then in my case I hade issues with Bcrypt and I found a video of some one using metasploit to get around it. You are going to need to change the version of bcrypt in you package.json file to the same version in the video. here:https://asciinema.org/a/a1dRt0drHpSbYQ5tXmvBf3eRE

I also ran into an issue using semantic-ui-react with Termux and found a website that quickly explained all you need to do run npm install fomantic-ui and again with fomantic-ui-css. You need to add these to your package.json file. Check it out her for a more in depth explanation. https://hackernoon.com/code-a-react-website-on-your-android-smartphone-or-tablet-like-you-never-imagined-3e56c534f6e7.

After that you should be pretty set to either start brand new on either your front end or backend but in my case I started with a project from GitHub and I have been making little adjustments to my project when I’m out and about. 

I hope this helps you or just sparks some creativity for you. I will definitely be back in here to update this blog more as I learn more them but for now Ta-Ta!
Understanding Kubernetes: part 34 – Kubeconfig file
Tags: kubernetes, devops, docker, beginners
Published: 2020-07-10 06:44:47

---
title: Understanding Kubernetes: part 34 – Kubeconfig file
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/oogvnqn6fx9w55fn3wyb.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Kubernetes Sketchnotes with a focus about Kubeconfig files.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oogvnqn6fx9w55fn3wyb.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xz6u24tx09dmtrdhb1w4.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
The 5 Habits of Highly Productive Programmers
Tags: productivity, tutorial
Published: 2020-07-10 06:36:52

⭐ *I always believe that a good developer is not only being a great programmer but also possessing great habits*🤯.

⭐ **What do you mean by `Productivity`?**
👉 The term productivity is defined as the amount of output you churn out compared to input.

⭐ **So why you should be `Productive`?**🤔
👉 Being a `Productive` Programmer brings tons of pluses including higher pay, office benefits, increased popularity among peers, and internal Satisfaction🔥.

***

### ⚠️THE MOST IMPORTANT THING TO BE PRODUCTIVE ⚠️

         👇👇👇👇👇👇👇👇👇👇👇👇👇👇

⭐⭐LOVE ❤️ WHAT YOU ARE DOING⭐⭐

👉Productivity gains come with time, so don’t expect to see massive productivity gains in the short term. So

***

# Tips For Gaining Productivity:-

## Tip 1 :

* Use your time to gain something related to your field

* ![Tip 1](https://dev-to-uploads.s3.amazonaws.com/i/h885btn561ryd5w8ja7z.png)

## Tip 2 :

* ![Tip 2](https://dev-to-uploads.s3.amazonaws.com/i/srm1215w9if5js8rp7oh.png)

## Tip 3 :

* ![Tip 3](https://dev-to-uploads.s3.amazonaws.com/i/xw0z82mfllj94l8luplm.png)

## Tip 4 :

* ![Tip 4](https://dev-to-uploads.s3.amazonaws.com/i/zlwlx1x89hg2637ghfqe.png)

## Tip 5 :

* ![Tip 5](https://dev-to-uploads.s3.amazonaws.com/i/xi5mpebpjlnqqyv1tt8t.png)
Client side form validation using only HTML
Tags: html, tutorial
Published: 2020-07-10 06:13:55

Demo of validations in this article can be found here - https://codepen.io/michaelburrows/pen/wvMXaoy

In the past client side form validation could only be achieved by using JavaScript.

While HTML validation is not as customisable it’s a much cleaner and simpler solution to implement.

This article contains just some examples of the different types of validations you can do with HTML.

###Required Fields

If a field is mandatory then simply add the required attribute.

```html
<input type="text" required>
```

###Email validation

Email addresses can be validated using a type="email" input field.

This checks that the input text contains @ and . symbols with no spaces between the characters.

```html
<input id="email" type="email" name="email" required>
```

###Username validation

Username requirements vary so we need to use the pattern attribute.

The patter attribute allows us to use regular expressions to test for more explicit requirements.

In this example the pattern only allows letters, numbers, and be between 3 & 15 characters in length.

```html
<input id="username" type="text" name="username" required pattern="^[a-z0-9]{3,15}$" title="Password may only contain letters and numbers">
```

Also note the inclusion of the title attribute.

This will appear in a tooltip to help users understand the field requirements if text is invalid.

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

###Password validation

As with usernames password requirements vary so we’ll once again use a pattern.

This pattern will accept 8 to 25 characters with at least one uppercase & lowercase letter, and a number.

```html
<input id="password" type="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,25}$">
```

###URL validation

URLs can be validated using the type="url" input field.

An optional pattern is used ensure URLs start with http(s) otherwise file:// would be a valid URL.

```html
<input id="url" type="url" name="url" required pattern="https?://.+">
```

###Age validation

If you need to validate an age or any number that falls between two values the type="number" input is used.

As number fields only allow numbers we just need to specify our min and max values.

```html
<input id="age" type="number" name="age" required min="18" max="36">
```

###Styling valid/invalid input using CSS

Using the following CSS we can style fields based on whether they contain valid or invalid data.

```css
input {  
  border: 2px solid #eee;
  border-radius: 4px;
}
input:valid,
input:in-range {  
  border-color: green;
}
input:invalid,
input:out-of-range {
  border-color: red;  
}
```

If a field contains a valid input it will have a “green” border otherwise the border is “red”.

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