teleren/devto huggingface dataset:
Refactoring 002 - Extract Method
Tags: refactoring, oop, webdev, codenewbie
Published: 2021-11-25 16:25:19

*Find some code snippets that can be grouped and called atomically.*

> TL;DR: Group your cohesive sentences together

# Problems Addressed

- Readability

- Complexity

- Code Reuse

# Related Code Smells

- {% post https://dev.to/mcsee/code-smell-03-functions-are-too-long-4hji %}

- {% post https://dev.to/mcsee/code-smell-05-comment-abusers-2ba5 %}

- {% post https://dev.to/mcsee/code-smell-18-static-functions-fpj %}

- {% post https://dev.to/mcsee/code-smell-22-helpers-2j6j %}

- {% post https://dev.to/mcsee/code-smell-74-empty-lines-467h %}

- {% post https://dev.to/mcsee/code-smell-78-callback-hell-287f %}

- {% post https://dev.to/mcsee/code-smell-102-arrow-code-4kfk %}

# Steps

1. Move the code fragment to a separate new method 

2. Replace the old code with a call to the recently created method.

# Sample Code

## Before

[Gist Url]: # (https://gist.github.com/mcsee/18f22cff14d588942fc87893bb73edeb)
```kotlin
object Ingenuity {
    fun moveFollowingPerseverance() {
        //take Off
        raiseTo(10 feet)
      
        //move forward to perseverance
        while (distanceToPerseverance() < 5 feet){
             moveForward()             
         }
        
        //land
        raiseTo(0 feet)
    }
```

## After

[Gist Url]: # (https://gist.github.com/mcsee/d1e6a299bbb104132e48ee19a45efa7e)
```kotlin
object Ingenuity {   
    //1. Move the code fragment to a separate new method 
    private fun takeOff() {
        raiseTo(10 feet)
    }
    
    //1. Move the code fragment to a separate new method 
    private fun moveForwardToPerseverance() {
       while (distanceToPerseverance() < 5 feet){
             moveForward()             
         }
    }
    
    //1. Move the code fragment to a separate new method 
    private fun land() {
        raiseTo(0 feet)
    }
    
    fun moveFollowingPerseverance() {
        takeOff()
        //2. Replace the old code with a call to the recently created method.
        moveForwardToPerseverance()
        //2. Replace the old code with a call to the recently created method.
        land()
        //2. Replace the old code with a call to the recently created method.
    }
}
```

# Type

[X] Automatic
 
Many IDEs support this safe refactoring

# Limitations

Does not work well if you use [meta-programming anti-pattern](https://dev.to/mcsee/laziness-i-meta-programming-32a9).

# Tags

- Complexity

- Readability

# Related Refactorings

-  Move method to a new class

# Credits

Image by <a href="https://pixabay.com/users/hreisho-2216364/">Hreisho</a> from <a href="https://pixabay.com/">Pixabay</a>

* * * 

This article is part of the Refactoring Series.
How to lazy load modules in Angular with loadChildren
Tags: angular, typescript, codever, snippets
Published: 2021-11-25 16:24:24

**Project**: [`codever`](https://github.com/CodeverDotDev/codever) - **File**:  `app.routing.ts`

To lazy load Angular modules, use `loadChildren` (instead of component) in your AppRoutingModule routes configuration as follows.


```typescript
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PageNotFoundComponent } from './not-found.component';
import { SnippetNotFoundComponent } from './not-found/snippet-not-found.component';

const routes: Routes = [
  {
    path: 'personal',
    loadChildren: () => import('app/personal/personal-bookmarks.module').then(m => m.PersonalBookmarksModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('app/user/dashboard/user-dashboard.module').then(m => m.UserDashboardModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('app/user-settings/user-settings.module').then(m => m.UserSettingsModule)
  },
  {
    path: 'public',
    loadChildren: () => import('app/public/public.module').then(m => m.PublicBookmarksModule)
  },
  {
    path: 'my-snippets',
    loadChildren: () => import('app/codelet/codelet.module').then(m => m.CodeletModule)
  },
  {
    path: 'my-codelets',
    redirectTo: 'my-snippets',
  },
  {
    path: 'search',
    loadChildren: () => import('app/search-results/search-results.module').then(m => m.SearchResultsModule)
  },
  {
    path: '',
    redirectTo: 'public',
    pathMatch: 'full'
  },
  {path: '404-snippet', component: SnippetNotFoundComponent},
  {path: '**', component: PageNotFoundComponent}
];


/**
 * See App routing @https://angular.io/docs/ts/latest/guide/ngmodule.html
 */
@NgModule({
  imports: [
    RouterModule.forRoot(
      routes
    )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
```

Where a child module might look something like the `SearchResultsModule`:

```typescript
const searchResultsRoutes: Routes = [
  {
    path: '',
    component: SearchResultsComponent
  }
];

@NgModule({
  declarations: [SearchResultsComponent],
  imports: [
    RouterModule.forChild(searchResultsRoutes),
    CommonModule,
    CodeletModule,
    SharedModule,
    MatTabsModule,
  ]
})
export class SearchResultsModule { }
```

<span style="font-size: 0.9rem">
  <strong>Reference: </strong> 
<a href="https://angular.io/guide/lazy-loading-ngmodules" target="_blank" style="font-weight: lighter">
     https://angular.io/guide/lazy-loading-ngmodules
  </a>
</span>

<hr/>


> Shared with :heart: from [Codever](https://www.codever.dev/snippets/602675a61a93236e029a1f79/details).  :point_right:  use the [**copy to mine**](https://www.codever.dev/snippets/602675a61a93236e029a1f79/details) functionality to add it to your personal snippets collection.
32" Curved Monitor Recommendations?
Tags: discuss, hardware, monitors
Published: 2021-11-25 16:08:40

I'm looking to buy a 32" curved monitor for Black Friday/Cyber Monday. I dropped the question on Twitter as well, but maybe folks will chime in here as well.

{%twitter 1463896482013188103 %}

I've found some, but I'm curious if folks have recommendations?

![A Commodore 64 with a sphere rotating on the screen](https://media.giphy.com/media/l0NwPdduX7IL1rS1i/giphy.gif)

Update 2022: A little late here, but I ended up going with this one, [LG 34WN80C-B UltraWide Monitor 34” 21:9 Curved WQHD (3440 x 1440) IPS Display](https://www.amazon.ca/gp/product/B07YGZ7C1K)
Book Text Challenge V1
Tags: codepen
Published: 2021-11-25 15:38:48

{% codepen https://codepen.io/MrRoberts/pen/pormyEv %}

I've been hooked on the codepen challenges for a few months now. I've been trying to do them with the idea of not putting in every bell and whistle that CSS affords. Seems to me from a standpoint of advertising your self, clean, readable results might be the best way to woo potential clients.  To me the book text challenge really called out for a straight forward approach. I think I ended up with a result that feels a bit like an article in the New Yorker magazine.
Removing people using UTF-8 👩‍👩‍👦‍👦
Tags: webdev, javascript, html, programming
Published: 2021-11-25 15:37:32

While I was writing my new article I found out about really cool thing I am going to share with you.

Check out this emoji containing 4 people 👩‍👩‍👦‍👦.

While I was trying to delete 👩‍👩‍👦‍👦 in VSCode using backspace it 
didn't disappear, but it just changed to this 👩‍👩‍👦. After hitting another backspace it changed to 👩‍👩 then to 👩 and then it finally disappeared. So it goes 

```
👩‍👩‍👦‍👦 ⌫ 👩‍👩‍👦 ⌫ 👩‍👩 ⌫ 👩 ⌫
```

## Why this happens?
When we look on the decoded symbols, we can see that the symbols are equal to this in hex:

```
👩‍👩‍👦‍👦:	0x1f469 0x200d 0x1f469 0x200d 0x1f466 0x200d 0x1f466
👩‍👩‍👦‍👦:	0x1f469 0x200d 0x1f469 0x200d 0x1f466
👩‍👩:	0x1f469 0x200d 0x1f469
👩:	0x1f469
```

While 0x200d character is a "ZERO WIDTH JOINER" which tells the renderer, that the preceding and following characters should join each other. 🎉

So it is like 👩 + 👩 + 👦 + 👦.

Cool isn't it?

PS:
> Removing of single woman works as well, so this 👩‍👦‍👦 can transformed to the hex code like this: 0x1f469 0x200d 0x1f466 0x200d 0x1f466
#Strings in Java
Tags: programming, java
Published: 2021-11-25 15:34:57

#Strings 
Strings in Java are Objects that are backed internally by a char array. Since arrays are immutable(cannot grow), Strings are immutable as well. Whenever a change to a String is made, an entirely new String is created. 
#Syntax:  
String str = "abcd";
#Memory allotment of String
Whenever a String Object is created as a literal, the object will be created in String constant pool. This allows JVM to optimize the initialization of String literal.
The string can also be declared using new operator i.e. dynamically allocated. In case of String are dynamically allocated they are assigned a new memory location in heap. This string will not be added to String constant pool.
#Example:
String str = new String("abcd");
#An example that shows how to declare String 
import java.io.*;
import java.lang.*;
 
class Test {
    public static void main(String[] args)
    {
        // Declare String without using new operator
        String s = "GeeksforGeeks";
 
        // Prints the String.
        System.out.println("String s = " + s);
 
        // Declare String using new operator
        String s1 = new String("GeeksforGeeks");
 
        // Prints the String.
        System.out.println("String s1 = " + s1);
    }
}
Output: 

String s = GeeksforGeeks
String s1 = GeeksforGeeks
Figma Tutorial — How to design a landing page for your course
Tags: landingpagedesign, figmaplugin, figmatutorial
Published: 2021-11-25 15:53:26

---
title: Figma Tutorial — How to design a landing page for your course
published: true
date: 2021-11-25 15:34:13 UTC
tags: landingpagedesign,figmaplugin,figmatutorial
canonical_url: 
---

### Figma Tutorial — How to design a landing page for your course

![](https://cdn-images-1.medium.com/max/1024/1*B4kzRr8-0puOyV73OlsY5Q.jpeg)

To design a Landing Page with Figma, you don’t have to be an expert in Figma. In fact, you can create a Landing page design in no time at all using the Theme Composer Figma plugin.

In this quick tutorial, we’ll use the Theme Composer Figma plugin to show you how to create a landing page, customize it, and covert it to HTML/CSS code.

We’ll create an Course landing page and here’s a sneak peek at what the finished design will look like.

![](https://cdn-images-1.medium.com/max/1024/0*Z8En9D-j4Ync2C-H.png)

To be able to design this landing page, we’ll see how to :

- **Generate a landing page design with the Theme Composer plugin.**
- **How to add our text and images content to the landing page.**
- **We’ll also see how to edit the color palette of the landing page.**
- **And lastly, we will convert our landing page to a responsive HTML code.**

Let’s get started.

### Video Tutorial:

{% youtube v3b1StI1S7w %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/figma-tutorial-how-to-design-a-landing-page-for-your-course/) _on November 25, 2021._
Figma Tutorial — How to Design a SAAS landing page
Tags: landingpagedesign, figmatutorial, figmaplugin
Published: 2021-11-25 15:52:44

---
title: Figma Tutorial — How to Design a SAAS landing page
published: true
date: 2021-11-25 15:31:49 UTC
tags: landingpagedesign,figmatutorial,figmaplugin
canonical_url: 
---

### Figma Tutorial — How to Design a SAAS landing page

![](https://cdn-images-1.medium.com/max/1024/1*6NnMbjKODUitOK4hibGh1Q.jpeg)

To design a Landing Page with Figma, you don’t have to be an expert in Figma. In fact, you can create a Landing page design in no time at all using the Theme Composer Figma plugin.

In this quick tutorial, we’ll use the Theme Composer Figma plugin to show you how to create a landing page, customize it, and covert it to HTML/CSS code.

We’ll create a SAAS landing page and here’s a sneak peek at what the finished design will look like.

![](https://cdn-images-1.medium.com/max/1024/0*vOTqgFv-BQJjw2l2.png)

To be able to design this landing page, we’ll see how to :

- **Generate a landing page design with the Theme Composer plugin.**
- **How to add our text and images content to the landing page.**
- **We’ll also see how to edit the color palette of the landing page.**
- **And lastly, we will convert our landing page to a responsive HTML code.**

Let’s get started.

### Video Tutorial:

{% youtube ViyPUyfTsdE %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/figma-tutorial-how-to-design-a-sass-landing-page/) _on November 25, 2021._
Figma Tutorial — How to design a Mobile APP landing page
Tags: figmaplugin, landingpagedesign, figmatutorial
Published: 2021-11-25 15:52:15

---
title: Figma Tutorial — How to design a Mobile APP landing page
published: true
date: 2021-11-25 15:27:29 UTC
tags: figmaplugin,landingpagedesign,figmatutorial
canonical_url: 
---

### Figma Tutorial — How to design a Mobile APP landing page

![](https://cdn-images-1.medium.com/max/1024/1*kzHqf_AFdwqVEJwHYtjFjQ.jpeg)

To design a Landing Page with Figma, you don’t have to be an expert in Figma. In fact, you can create a Landing page design in no time at all using the Theme Composer Figma plugin.

In this quick tutorial, we’ll use the Theme Composer Figma plugin to show you how to create a landing page, customize it, and covert it to HTML/CSS code.

We’ll create a Mobile APP landing page and here’s a sneak peek at what the finished design will look like.

![](https://cdn-images-1.medium.com/max/1024/0*KboJUQN1cptPkAxu.png)

To be able to design this landing page, we’ll see how to :

- **Generate a landing page design with the Theme Composer plugin.**
- **How to add our text and images content to the landing page.**
- **We’ll also see how to edit the color palette of the landing page.**
- **And lastly, we will convert our landing page to a responsive HTML code.**

Let’s get started.

### Video Tutorial:

{% youtube xFedakIxxl4 %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/figma-tutorial-how-to-design-a-mobile-app-landing-page/) _on November 25, 2021._
How to Keep A Program Running with Ssh logout
Tags: tools, linux
Published: 2021-12-31 06:54:51

---
title: How to Keep A Program Running with Ssh logout
published: true
date: 2021-11-25 15:08:01 UTC
tags: Tools,Linux
canonical_url: http://coderscat.com/how-to-keep-program-running-with-ssh-logout/
---

Some times we need to keep jobs running without a `ssh` session, here there are three ways to achieve this. I suggest to learn a terminal multiplexer in long term, it’s really useful when you have long time working on Linux/Unix system.

## Option 1: `nohup`

The best and simplest way is:

```
nohup long-running-command &
```

It was made specifically for this, by default it will log stdout to `nohup.log`, if standard output is not a terminal, logs will be appended to `~/nohup.log`. If you want to specify the output log into a different file:

```
nohup COMMAND > FILE
```

More details can refer to `man nohup`. What `nohup` does, is to effectively separate the process from the terminal:

- It closes standard input (the program will _not_ be able to read any input, even if it is run in the foreground. it is not halted, but will receive an error code or `EOF`).
- It redirects standard output and standard error to the file `nohup.out`, so the program won’t fail for writing to standard output if the terminal fails, so whatever the process writes is not lost.
- It prevents the process from receiving a `SIGHUP` (thus the name).

## Option 2: `bg` + `disown`

If you already have started the program and don’t want restart it, we can use `ctrl+z` to stop current execution and then use `bg` to resume it and switch the running program to background (We can use `fg` to pull the job to frontground)

Finally we use `disown` to remove the process from the shell’s job control.

So, even you logout from a `ssh` session, the program will still keep running in background.

```
ctrl+zbgdisown -h
```

## Option 3: Use terminal multiplexer

We have three choices for this, [[screen]], [[tmux]], and [[byobu]].

`screen` and `tmux` is mostly used ones. On Ubuntu or Debian system, we install it with:

```
sudo apt-get install screen sudo apt-get install tmux
```

[Byobu](https://www.byobu.org/) is an enhancement for the GNU Screen, you can install it with this commands:

```
sudo add-apt-repository ppa:byobu/ppasudo apt-get updatesudo apt-get install byobu
```
CLI UI for Laravel Artisan
Tags: laravel, artisan, php, commandline
Published: 2021-11-25 15:07:46

Hi guys, just want to introduce you my Composer Package, which provides CLI UI for Laravel Artisan

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rqtu0baxx8dxx48stzd.jpg)

Here is a link - https://github.com/VladReshet/ArtisanUI

It supports all built-in laravel commands, including your custom commands. Just install it via composer and run "artisan ui". Enjoy!
10 SALE TIPS
Tags: marketing, productivity, career
Published: 2021-11-25 15:06:50

1) Set goals in writing.

Before you sell anything there needs to be a plan. 

Create the plan and make your goal big!

Remember, you are not just an designer, writer, marketer, programmer. If you are in this sales industry you are supposed to close deals. This is the end goal.

2) Establish trust.

Can you sell things without trust? Sure. will you do it 
consistently, no! 

Pay attention to everything. Use all the information.

Take your time building the sale. 

Your client is not in a rush and if they are, slow them down. Lead them. Be yourself.

3) Build value.

Be an expert in your field. Show them why your product is the best. Don't tell them, show them!

Be a trend setter. Do not be like every other salesman.

People want a good deal, so help them find one. But do it on your terms.

4) Identify a need.

If there is no need then you have little chance to sell anything. 

Questions. Questions. Questions.

Ask them... mean them... listen to their answers. Listen to what they aren't saying. 

Pay attention to everything!

5) Inform/educate .

This is the part of sale I think most overlook. Lets face it, most customers do not know your product as well as you do. It is your job to teach them.

If you are in sales, you are an educator, you are a teacher.

What makes your product stand out? Why?

6) Provide solutions.

Find options that will lead to fixing their problem.

Have multiple things to sell, always provide all of your options. 

Being able to fix peoples problems is priceless. Learn how to promote your solutions in a way the client can understand.

7) Inspire.

This is the stage the literally can make you a millionaire. People buy from people who inspire them.
 
Show you want to help them, be genuine.

Now is when you use all of the information have to create excitement and motivate your customer into buying.

8) Create urgency.

Why should they buy now? Well most times the customer cant answer this, so its your job to tell them why. 

Strategically position yourself to do the job when you want to.

Urgency closes deals more than anything else. 

Be a master urgency creator.

9) Overcome objections.

Expect objections. Be prepared. Do not fear objections, use them as a tool.

An objection is not a "No", it is merely a defense mechanism.

Learn softening/reverses. "I hear that a lot, but wouldn't you say its time to stop putting this off?

10) Ask for the sale!

Sounds simple right? It's not.

The customer is talking to you for a reason, it is not because they love talking to strangers. 

You have spent this process selling yourself. That was the plan all along. That was your goal. 

Now ask for the sale.

Recap:

1) Set goals.
2) Establish trust.
3) Build Value.
4) Identify a need.
5) Inform/educate.
6) Provide solutions.
7) Inspire.
8) Create urgency.
9) Overcome objections.
10) Ask for the sale.
Histogram In R
Tags: histogram, graphs, r
Published: 2021-11-25 14:51:11

A histogram represents the frequencies of values of a variable bucketed into ranges. 
->Histogram is similar to bar chat but the main difference in this is ,it groups the values into continuous ranges. 
->Each bar in histogram represents the height of the number of values present in that range. 
->R creates histogram using hist() function. This function takes a vector as an input and uses some more parameters to plot histograms.

Syntax:- 
     hist(v,main,xlab,xlim,ylim,breaks,col,border)

Code:

```
v <- c(9,13,21,8,36,22,12,41,31,33,19)
h <- hist(v,xlab = "Weight",col = "pink",border = "blue")
> h
$breaks 
[1] 5 10 15 20 25 30 35 40 45 
$counts 
[1] 2 2 1 2 0 2 1 1 
$density 
[1] 0.03636364 0.03636364 0.01818182 0.03636364 
0.00000000 0.03636364 0.01818182 
[8] 0.01818182 
$mids 
[1] 7.5 12.5 17.5 22.5 27.5 32.5 37.5 42.5 
$xname 
[1] "v" 
$equidist 
[1] TRUE 
attr(,"class") 
[1] "histogram"
```

->To give a specific value of some range in X axis and Y axis, we can use "xlim" and "ylim" parameters.
By using this we can get the width of each bar using breaks.
 
Below is the example code:
Code:
```
v <- c(9,13,31,8,31,22,12,31,35)
hist(v,xlab = "Weight",col = "light green",
border = "red", xlim = c(0,40), ylim = c(0,5),breaks = 5)
```

Coming next, I have used the function text() which helps to add text to plot and return values to place the count above each cell.

Code:
```
h<-hist(mtcars$mpg, breaks=12, col="skyblue4") 
text(h$mids,h$counts,labels = h$counts,adj=c(0.5,-0.5))
```

Generally, a break parameter tells the number of cells required in 
the histogram plot.

code:
```
x<- c(5,3,5,7,3,6,5)
hist(x,breaks = 4,col="violetred3", ,main="breaks=4" ) 
hist(x,breaks = 10,col="slateblue3",main="breaks=10" )
```
How many (Human) Languages you know?
Tags: watercooler, discuss
Published: 2021-11-25 14:35:58

Hello!

Sometime ago, after coding for a bit too much time, I thought of learning a new human language as a distraction. Even though I didn't follow through on that thought, I am curious now, how many of you know multiple human languages? Which ones do you know?

How did you learn them? Did you find any interesting resources, or did you take some classes or courses? Did you also, like me, try learning something as a distraction or hobby?

On that note, if you do know multiple languages, do you feel that knowing multiple human languages helped you be a better developer? 

Please let know in comments!!!

Thanks :)