teleren/devto huggingface dataset:
Design System - Icons for vue 3
Tags: vue, javascript, help
Published: 2021-05-07 10:31:02

   Now a days every web application using svg icons for their project. because, svg give a detailed view, resolution, speed...etc., each one use different approach to load the svg icon in their project. but, I personally like this **Convert all svg's into one sprite.svg** approach

Refer this [guide](https://v3.vuejs.org/cookbook/editable-svg-icons.html#base-example) to know why i approach this pattern.

>Initial project setup

First install the vue cli in your sysstem
```
$ npm install -g @vue/cli
       -OR-
$ yarn global add @vue/cli
```

Create a vue project using vue cli
```
$ vue create svg-icon-setup
#choose: Vue 3 Preview (if you own setup your own configuration)
$ cd svg-icon-setup
$ yarn serve
```
Now the vue app is ready. Then go to your browser and open this url: [http://localhost:8080/](http://localhost:8080/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/020juvarzzts1k61sush.png)
 
> Setup svg sprite icon.

The same code directory run the below command
```
$ vue add svg-sprite
```
For more info about this [svg-sprint] (https://github.com/swisnl/vue-cli-plugin-svg-sprite) addon

Once the svg-sprite added into your project. the addon will create two files are: 
* svg-icon-setup/src/components/SvgIcon.vue (Icon component)
* svg-icon-setup/vue.config.js (Build configuration)

Now, time to add our own svg icons inside `src/assets` the directory.

Replace the below code changes in the project

```
<!-- src/App.vue -->

<template>
  <SvgIcon
    name="facebook"
  />
  <SvgIcon
    name="twitter"
  />
  <SvgIcon
    name="tumblr"
  />
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'App',
  components: {
    SvgIcon
  }
}
</script>
```

```
/* vue.config.js */

module.exports = {
  pluginOptions: {
    svgSprite: {
      /*
       * The directory containing your SVG files.
       */
      dir: 'src/assets/icons',
      /*
       * The reqex that will be used for the Webpack rule.
       */
      test: /\.(svg)(\?.*)?$/,
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      loaderOptions: {
        extract: true,
        spriteFilename: 'img/icons.svg' // or 'img/icons.svg' if filenameHashing == false
      },
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      pluginOptions: {
        plainSprite: true
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
  }
}
```

After the above code replaced. `kill` and run the `serve once again`: 

The page will be render below like the screenshot
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj9r5dat8bgawn2vj9kb.png)

That's all.

Reference for the [code repo](https://github.com/explore-free-projects/svg-icon-setup)

Cover image by **[balazsketyi unsplash](https://unsplash.com/@balazsketyi)**
JAVA Basics #2 - IntelliJ IDEA
Tags: java, programming, beginners, intellij
Published: 2021-05-07 10:28:17

Before writing programs in java, you need to have a special programming environment installed  in your machine. Here we are going to install **IntelliJ IDEA﻿**.
> IntelliJ IDEA is an integrated development environment developed by a company named JetBrains. It is largely meant for Java hence it is mainly used for the development of java programs.

Prior to installing you need to make sure that your system have all the requirements needed for the intellij idea. First visit [this link](https://www.jetbrains.com/help/idea/installation-guide.html) and scroll down till you reach *'System requirements'*.
![alt text3](https://raw.githubusercontent.com/chathuRashmini/Blog-Images/main/Blog%20images/inteliJ3.PNG?token=APOCKO6PPHDW6CGNYC77ZGDASSD4A)

After making sure that you have all the system requirements, head to [this link](https://www.jetbrains.com/idea/download/#section=windows).
Here I'm going to install the community version which is shown in the below image.
![alt text](https://raw.githubusercontent.com/chathuRashmini/Blog-Images/main/Blog%20images/inteliJ21.PNG?token=APOCKO5QN2AD4DITGXZ3TE3ASSD7W)

It'll take few minutes for the download. Once it is done double click and open the downloaded file. Then proceed further to finish the installation process.
![alt text22](https://raw.githubusercontent.com/chathuRashmini/Blog-Images/main/Blog%20images/inteliJ22.PNG?token=APOCKO4MN5A4RE3LJ6KO6PLASSEIG)

![alt text23](https://raw.githubusercontent.com/chathuRashmini/Blog-Images/main/Blog%20images/inteliJ23_restart.PNG?token=APOCKOYONSRDFK4MZHQOFODASSEF6)
Now restart your machine.

After that open the intellij idea. First you will see a window like this;
![alt text24](https://raw.githubusercontent.com/chathuRashmini/Blog-Images/main/Blog%20images/inteliJ24.PNG?token=APOCKO5I2CBOT6CPXQS2ZKDASSET4)
When you accept the user agreement and click the 'Continue', you are ready to start programming in java. 
You will be able to write your first java program with the help of our next article. :)
Remove pages from a PDF programmatically
Tags: dotnet, programming, tutorial, csharp
Published: 2021-05-07 10:21:50

How to remove a single or a list of pages from a PDF?
You can do this using Adobe Acrobat or any such software/tool. But what if the tool is not available? And what if you always get such PDF files in bulk and you have to remove all those unnecessary pages. This is just a one random use-case. There could be many others. 
[GroupDocs.Merger](https://docs.groupdocs.com/merger/net/remove-pages/) for .NET provides an ability to remove single page or a collection of specific page numbers from the source document. 
Have a look at the following code:

```csharp
string filePath = @"c:\sample.pdf";
string filePathOut = @"c:\output\result.pdf";

RemoveOptions removeOptions = new RemoveOptions(new int[] { 3, 5 });

using (Merger merger = new Merger(filePath))
{
    merger.RemovePages(removeOptions);
    merger.Save(filePathOut);
} 
```
The above code will remove page 3 and 5 from the source file. 
**About the API**
GroupDocs.Merger is a back-end, UI-agnostic API That could be implemented in any .NET (new or existing) application without any third party tool or software dependency. 
All you have to do is to add the DLL reference or install [NuGet](https://www.nuget.org/packages/GroupDocs.Merger/) in the application.
Kotlin Properties – Read/Write Properties from/to .properties/.XML File
Tags: kotlin, xml, properties
Published: 2021-05-07 10:20:55

https://grokonez.com/kotlin/kotlin-properties-read-write-properties-file-properties-xml-file

Kotlin Properties – Read/Write Properties from/to .properties/.XML File

In the post, we show how to Read/Write Properties from/to .Properties/.XML files by Kotlin language.

<!--more-->
<h2>I. Kotlin - Read/Write Properties from/to .Properties file</h2>
<h3>1. Write Properties to .Properties file</h3>
<h4>1.1 Properties store() method</h4>
We use <code>java.util.Properties.store()</code> methods:

<pre><code class="language-java">
// 1.
fun store(out: OutputStream, comments: String): Unit

-> Writes this property list (key and element pairs) in this Properties table 
to the output stream in a format suitable for loading into a Properties table using the load(InputStream) method.

// 2.
fun store(writer: Writer, comments: String): Unit

-> Writes this property list (key and element pairs) in this Properties table 
to the output character stream in a format suitable for using the load(Reader) method.
</code></pre>
<h4>1.2 Kotlin Program – write Properties to .properties file</h4>
<pre><code class="language-java">
package com.javasampleapproach.kotlin.properties

import java.io.FileOutputStream
import java.io.FileWriter
import java.io.IOException
import java.util.Properties

fun main(args: Array<String>) {
	val properties = Properties()

	properties.put("db.username", "username")
	properties.put("db.password", "password")
	properties.put("db.driver", "org.postgresql.Driver")
	properties.put("db.url", "jdbc:postgresql://localhost/testdb")

	var propertiesFile = System.getProperty("user.dir") + "\\file.properties"
		
	/*
	 * 	Approach 1: 
	 * 	use -> 'java.util.Properties.store(out: OutputStream, comments: String)'
	 */
	var fileOutputStream = FileOutputStream(propertiesFile)
	properties.store(fileOutputStream, "save to properties file")
	
	/*
	 * 	Approach 2: 
	 * 	use -> 'java.util.Properties.store(writer: Writer, comments: String)'
	 */
	propertiesFile = System.getProperty("user.dir") + "\\file_1.properties"
	val fileWriter = FileWriter(propertiesFile)
	properties.store(fileWriter, "save to properties file")
}
</code></pre>

-> <code>.properties</code> output file:

More at:

https://grokonez.com/kotlin/kotlin-properties-read-write-properties-file-properties-xml-file

Kotlin Properties – Read/Write Properties from/to .properties/.XML File
Ye who teacheth learneth (#3)
Tags: devjournal, beginners, motivation
Published: 2021-05-07 10:16:35

Steady, not fast - this is how I'm moving. Here's the latest update of lessons learnt during my weekly coding hours!

## Teach/Help!
If you know yourself and know how to learn, you can achieve great things. But it is not the best way to get to the centre of something. A much better way is to teach! If you have already achieved some slight proficiency, why not help out at one of the many learner sites? Give helpful advice and guide learners to places where they can grow. Some possible ideas:
* Help here at dev.to
* Help at other learner-sites, e.g. FreeCodeCamp
* Plan and conduct a beginners html class for old folks or young people at a local school, community centre, etc.
* Ask local middle schools if you could run a web club
* Look for a young person to assist with his/her studies
* Buddy up! Look for a learning partner and divide the next activities among yourselves. Then explain your part to your buddy (and vice versa). *(This is the strategy that pulled Canada out of a dark pit of low-performing school graduates many decades ago.)*

## Not good enough to assist others?
I don't believe you one bit. It's about the right attitude. Take questions as a challenge - even if you don't know the full answer yet, try to find a solution or contribute. Yes, there are lots of great coders out there. So what. You are you. Go out there and face it!

## Real-world projects
I received good advice on dev.to to stop *tutorial porn* and start with real projects. A good friend of mine asked me to develop a tiny app for him. Yeah! This has kickstarted a lot of learning again. He is operating a small clinic, and he needs an online-booking form that he can view at the clinic and prepare files for the next patients. Have a look at the code and give me your best critical comments!

## Stats update
* Friday: mainly helping out and learning along; some minor corrections on my card game (3:00)
* Saturday: busy with the family - only small steps (1:20)
* Sunday: progress and lots of learning! started a [real-world-project](https://github.com/beitist/eeai-cvdtermin) (6:20)
* Monday: chores, chores, chores... css-styling and sketching. (5:40)
* Tuesday: life affairs... just a bit of cleanup (1:20)
* Wednesday: quite a productive day... lots of DOM manipulation and SQL requests, refreshing old php-memories (10:20)
* Thursday: stupid error tracking... makes me wish I had spent more time planning **and writing it down!** (5:30)


```stats:
life total: 254:30 hours
this week: 33:30 hours
new total: 288:00 hours
```

## What about you?
Are you still doing exercises and coding riddles, or are you already helping out? If not, where could you start? Share your experiences!

*Photo by [heylagostechie](https://unsplash.com/@heylagostechie?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)[Unsplash](https://unsplash.com/s/photos/teach?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*
Kotlin Array find the Smallest Element – min() minBy() minWith() methods
Tags: kotlin, minby, minwith, array
Published: 2021-05-07 10:13:32

https://grokonez.com/kotlin/kotlin-array-find-smallest-element-min-minby-minwith-methods

Kotlin Array find the Smallest Element – min() minBy() minWith() methods

In the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show how to use Kotlin Array methods <code>min()</code>, <code>minBy()</code>, <code>minWith()</code> to find the smallest element in a Kotlin Array.

<!--more-->
<h2>I. min() method</h2>
Kotlin Array method <code>min()</code> is used to returns the smallest element or <code>null</code> if there are no elements. If any of elements is <code>NaN</code>, it returns <code>NaN</code>.

Method signatures:

<pre><code class="language-java">//1. 
public fun Array&lt;out Double&gt;.min(): Double?

//2. 
public fun Array&lt;out Float&gt;.min(): Float?</code></pre>

Example:

<pre><code class="language-java">
package com.javasampleapproach.kotlin.array

fun main(args : Array<String>){
	val simpleArray = arrayOf(55.4, 20.0, 99.99, 1.99, 23.0, 34.2, 88.0, 72.1, 61.2, 43.9)
	 
	// public fun Array<out Double>.min(): Double?
	val largestElement = simpleArray.max()
	println(largestElement)
	// ->
	/*
		1.99
	*/	
}</code></pre>

<h3>min() with Comparable</h3> 
-> Implement <code>Comparable</code> for Kotlin Array object.

Method signature:

https://grokonez.com/kotlin/kotlin-array-find-smallest-element-min-minby-minwith-methods

Kotlin Array find the Smallest Element – min() minBy() minWith() methods
Every little step counts....
Published: 2021-05-07 10:09:47

I have learnt early in life not to under estimate every step taken towards achieving one's goals. The journey might seem like a thousand miles from what one hopes to achieve, but we must keep moving. Nothing in life is meant to be very easy. 

Relocating to the UK was an exciting experience for me. It opened many opportunities for me. As someone who loves to challenge herself, I started studying mathematics which I felt I was deficient in. Infact, I enrolled in an adult class. Not challenged enough, I registered to learn coding when the opportunity arose with Code Your Future (CYF).

I am a complete newbie in coding. When I started, I knew nothing about programming. But it's been an exciting experience so far. It can be quite frustrating sometimes. With patience and seeking help from my colleagues, the learning process has not been too difficult. I have learnt a lot within the last one year and I'm still eager to learn more. 

In all honesty, having to combine learning coding with my mathematics studies is a big challenge for me. This is coupled with being a wife and a mother of 3 boys! I must admit it has not been easy. Sometimes, I feel like quitting but I thank God for seeing me through. I am really glad that I never gave up. My partner has also been very supportive and helpful. 

I look forward to becoming a professional programmer!
Explore Javascript fundamental concept!
Tags: javascript
Published: 2021-05-07 10:08:18

**1. Javascript error handling**
A programmer's error handling must be known. Various types of error handling have in javascript one of them "try...catch".When code has no errors, it working process then code try part working and catch part stop its work and show output. But when the code has an error, try part stop working and catch part work and show an error.


**2. Coding Style**
Coding style makes code more readable and makes code more effective. Knowing this styles a programmer and code easily. Some coding styles principal is Curly Braces, Line Length, Semicolons, Nesting Levels. The easiest way to maintain code perfect style can use formatted extensions!

**3. Coding Comments**
Sometimes programmers need to do comments to understand the code working process. So coding comments rules must be known because unnecessary comments make code more complex. Some coding principles are (//) this sign used for line comment, (/*...*/) this sign used for multiline comment.

**4. Catching & typeOf()**
Space where data stored for a specific time when a user request it provides data to its user. 
With typeOf() we can determine which is boolean, string, number, etc.

**5. Cross-browser testing**
Developer test his developed projects work in every browser and every user can use them smoothly. This is important for a developer to check his project work correctly in most browsers. Also, ensure it work in every type of smart device like PC, 
Android, IOS, etc, and usable for disabled people.

**6. Block bindings**
var, let, const make an area from which they can be accessed from outside of this area they can not be accessible. var is a global variable it can be accessed from anywhere but let & const have restricted areas these areas are called block bindings.

**7. Block bindings in loops**
Block bindings are very useful when using loops. It is best practice to use let instead of var in loops because var makes it value global but let has a specific block.

**8. Best practices for block bindings**
ES6 development most developers use let instead of var and use const to limit the modification. Developer uses const as default 
and uses let where the variable value should change.

**9.Functions with default parameter values**
In ES6 a new method added that programmer can add default parameter values for that time when users couldn't pass parameter or give it with an empty value.

**10. Spread operator**
ES6 explores a powerful thing that's called spread operator. Using it programmer can copy an array with only three dots(...). It saves programmer time & stress
Kotlin filter List example
Tags: kotlin, filter, list
Published: 2021-05-07 09:58:08

https://grokonez.com/kotlin/kotlin-list-filter-methods-example

Kotlin filter List example

In the tutorial, <a href="https://grokonez.com">Grokonez</a> will show you how to work with Kotlin List <strong>filter</strong> methods.

<!--more-->
<h2>I. Kotlin List filter</h2>
<h3>1. filter(predicate: (T) -> Boolean): List<T></h3>
Method signature:

<pre><code class="language-java">public inline fun &lt;T&gt; Iterable&lt;T&gt;.filter(predicate: (T) -&gt; Boolean): List&lt;T&gt;</code></pre>

-> Returns a list containing only elements matching the given [predicate]

Practice:

<pre><code class="language-java">
val simpleList = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
var filterList = simpleList.filter { it%2 == 0 }
println(filterList)
/*
	[2, 4, 6, 8, 10]
*/</code></pre>
<h3>2. filterTo(destination: C, predicate: (T) -> Boolean)</h3>
Method signature:

More at:

https://grokonez.com/kotlin/kotlin-list-filter-methods-example

Kotlin filter List example
Build a GMAIL Clone Using just HTML & CSS - Beginners Tutorial
Tags: webdev, beginners, tutorial, html
Published: 2021-05-07 09:57:48

I Built Gmail Clone using just HTML & CSS. I Just Love to build these to practice my HTML & CSS Skills. I made a tutorial video to help beginners to improve there html & css skills to build real world projects.

**Tutorial Video:**

{% youtube ZgUehcvVx7g %}

**Github:** https://github.com/somanath-goudar/html-css-projects

Do you want to improve your HTML & CSS skills? Then Watch this video and follow along with me where we build GMAIL Clone using just HTML & CSS. We will be using flexbox and Google font Icons in this project.

Hope You Guys Enjoyed the Video. Like Share Comment and Subscribe to my channel for more videos like these.

**Channel:** https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA
Subscribe to My YouTube Channel, Next Week I Will be building **Tiktok Clone** & **Instagram Reels Clone** with just HTML & CSS.

**You may also like my other posts:**

{% link https://dev.to/somanathgoudar/build-a-youtube-clone-with-just-html-css-for-complete-beginners-4fk1 %}

{% link https://dev.to/somanathgoudar/facebook-clone-using-just-html-css-beginners-tutorial-2fe5 %}

{% link https://dev.to/somanathgoudar/build-a-linkedin-clone-using-just-html-css-3p1n %}
How To Copy Text To Clipboard using HTML CSS and JavaScript | Free Source Code
Tags: copytexttoclipboard, javascriptcopytexttoclipboard, copycodetoclipborad, htmlcssjavascript
Published: 2021-05-07 09:34:52

Q: How To Copy Text To Clipboard using HTML CSS and JavaScript?
A: After watching and reading the following video tutorial you will definitely know, how to copy text using HTML CSS & Javascript.

Hello friends, today we will be going to learn how do we copy text to a clipboard using JavaScript. I have posted many videos and articles before related to the Javascript project, now this the something new that we are going to build.

What do you mean by Copy Text To Clipboard?
The process of copying text, images, or other elements to our computer clipboard for paste in other places is known as copying text to clipboard. The copying method is the best and easy way to duplicating something for other purposes.

As you can see on the given image of our today project. We can see some HTML codes are inside the box and one button underneath this box. Basically, when we click on that copy-coded button, all text inside the box will be copied to our clipboard and we can paste it anywhere we want. We don't need to select text and copy them manually, it can be done with just one click.

Some questions and answers people asked on this topic.

Q: How do I copy text to the clipboard?
A: Normally, just select text, images or other elements with the mouse left button, and press CTR + C then selected items will be copied in the clipboard, now you can paste anywhere as you want.

Q: How do I copy text from div to clipboard on the button click?
A: Execute the div where text is in inside by making onclick() function on the button then in inside of that function, write div.select(); by doing this you text inside that div will select only, now to copy those selected texts, just type document.execCommand("copy"); then your text will be copied on your clipboard.

##Copy Text To Clipboard using HTML CSS and JavaScript | Free Source Code##
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2021/05/how-to-copy-text-to-clipboard-using-html-css-javascript.html">Click Here To Download All Source Code</a>
Kotlin Distinct() methods of List collection example
Tags: kotlin, distinct, list, collection
Published: 2021-05-07 09:31:50

https://grokonez.com/kotlin/kotlin-distinct-methods-list-collection

Kotlin Distinct() methods of List collection example

In the tutorial, <a href="https://grokonez.com">Grokonez</a> will show you how to work with Kotlin <code>distinct()</code> method of List collection.

<!--more-->
<h2>I. Practice</h2>
<h3>1. distinct() method</h3>
<code>distinct()</code> method is used to return a list that contains only distinct elements.

Method signature:

<pre><code class="language-java">public fun &lt;T&gt; Iterable&lt;T&gt;.distinct(): List&lt;T&gt;</code></pre>

- Work with simple list:

<pre><code class="language-java">val simpleList = listOf(1, 2, 3, 5, 3, 4, 1, 10, 13, 7, 10, 8)
println(simpleList)
// print on console
//-&gt;
/*
	[1, 2, 3, 5, 3, 4, 1, 10, 13, 7, 10, 8]
*/

println(simpleList.distinct())
// print on console
// -&gt;
/*
	[1, 2, 3, 5, 4, 10, 13, 7, 8]
*/</code></pre>

- Work with Kotlin objects list:

More at:

https://grokonez.com/kotlin/kotlin-distinct-methods-list-collection

Kotlin Distinct() methods of List collection example