teleren/devto huggingface dataset:
Let, Run, Apply, & Also di Kotlin
Tags: kotlin, oop, indonesia
Published: 2021-08-28 11:15:51

Fungsi dari scope function adalah untuk mengelola object menggunakan lambda / fungsi ekstensi. Kegunaan ini adalah agar kode mudah dibaca karena memiliki scope masing-masing. Buat kode class terlebih dahulu untuk nanti dipakai lagi :
```kotlin
data class Product (
    var name: String,
    var price: Int
)
```
## Jenis-jenis
Perlu diingat bahwa materi ini akan berkaitan erat dengan lambda bagi kamu yang belum tau apa itu lambda silahkan cek disini yaa :
{% link https://dev.to/alfianandinugraha/lebih-dekat-dengan-lambda-di-kotlin-2p66 %}
### Let
Let lambda memungkinkan untuk mengelola object sekaligus mengembalikan sesuatu. Let juga memiliki satu parameter yang nantinya juga bisa dialiaskan dengan keyword `it`. Contoh kode :
```kotlin
fun main() {
    val asus = Product("Asus", 6_000_000)

    val description: String = asus.let { product ->
        println(product.name)
        println(product.price)
        "Name ${product.name}, Price: Rp${product.price}"
    }

    println(description)
}
```
Hasil output :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpezjoibbsc5qrybzqxi.png)
### Run
Lambda ini hampir mirip dengan let yang membedakan adalah lambda ini tidak memiliki parameter jadi untuk mengakses objectnya menggunakan keyword `this`. Contoh kode :
```kotlin
fun main() {
    val lenovo = Product("Lenovo", 3_000_000)
    
    val description: String = lenovo.run {
        println(this.name)
        println(this.price)
        "Name ${this.name}, Price: Rp${this.price}"
    }
    
    println(description)
}
```
Hasil output :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yji06ov3l42wp4i4jo6b.png)
### Also
Also memiliki 1 parameter dan mengembalikan nilai object itu sendiri. Contoh :
```kotlin
fun main() {
    val msi = Product("MSI", 5_000_000)

    val newMsi: Product = msi.also { product ->
        println(product.name)
        println(product.price)
    }
}
```
Hasil Output :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6amd1cmayg2ljthx3g9.png) 
### Apply
Berbeda dengan sebelumnya, apply hanya mengembalikan nilai Object itu sendiri saja dan tidak memiliki paramater. Jadi untuk mengakses properti nya menggunakan keyword `this`
```kotlin
fun main() {
    val hp = Product("HP", 4_000_000)

    val newHp: Product = hp.apply {
        println(this.name)
        println(this.price)
    }
}
```
Hasil Output :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7ye0qyltgsimgmxldy4.png)
Submit Form without refresh using AJAX
Tags: ajax, javascript, php, wordpress
Published: 2021-08-29 09:44:18

Hi all,

Today we will see how to submit form without refreshing page using ajax.

It involves 3 simple steps.

Step 1:

```html
<form method="post" id="myForm" action="" >
<input type="text" placeholder="UserName" id="username" name="username" >
<input type="email" placeholder="UserEmail" id="useremail" name="useremail">
<input type="button" value="Login" onclick="submitForm()" >
</form>
<div id="response" ></div>
```
Add above HTML simple form, which takes simple information Name & Email. Add an onclick EventListener to button, which will be triggered on click.

Step 2:

```javascript
<script>
function submitForm()
{
var formData=$('#myForm').serialize();

$.ajax({
type:'post',
data:formData,
success:function(response)
{
$('#response').append(response);
}
});
}
</script>
```
This is the crucial step where we send data using ajax. Using serialize method, store the form data in a variable, and pass variable as data, in the above mentioned format. Store response on success in a div tag.

Note: Add above javascript code after above HTML Code, otherwise javascript will throw an error.

Step 3:

```php
<?php
if(isset($_POST['username']) && isset($_POST['useremail']))
{

echo "Form Successfully submitted";

exit;
}
?>
```
Using PHP, On success ,this data will be sent as response, and in javascript we display the response in div tag.

Note: Add above php code at the top of page, if you add in the middle of the page, you will get unnecessary response in div tag.

As ajax to make it work, add below script in head tag.
```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
```

In this way, we can submit form without refresh. In this post, we are just displaying a message to user on submission of form. But we can also increase the complexity by sending mail to user, checking data in db whether user is already registered or not ...

Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. 

Read: <a href="https://wordpress.org/plugins/increase-upload-limit/" target="_blank">How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?</a>

Social Profile : <a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/">LinkedIn</a>

Have a Nice Day!
Undefined Vs Not defined in javascript...
Tags: javascript, core
Published: 2021-08-29 08:51:55

- **Whenever we define a variable then the execution context in the first phase i.e memory allocation phase will provide a placeholder named as undefined to that variable**

 - **Not defined is error thrown out by the JS Engine when we are trying to access any variable that has not been assigned any memory by the execution context**

                      # code snippet-4
                      console.log(a); // undefined (for the memory allocation phase)
                      var a = 7;

                      console.log(x); // not defined
                      console.log(a); // 7 (after code execution phase)

#### Important Conclusions/Takeaways

- **for the code snippet-4 the line console.log(a); represents hoisting in javascript that means accessing variable before they are defined, and the reason  why a hoisted variable gives undefined as output is because of the execution context memory allocation phase as every javascript program on execution will create a memory even before the actual execution of the javascript code happens. If you want to understand what execution context is then refer my  [Execution Context Article](https://dev.to/jasmeetbali/execution-context-exploring-the-core-concepts-of-javascript-3kcb)**

- **An Interesting thing to note is that the state of the variable changes from undefined to not undefined if we have initialized some value to it or provided some value to it in later part of the code**

                      # code snippet-5
                      var a;
                      console.log(a); //undefined
                      a=10;

                      if(a===undefined){
                        consle.log("a is undefined");
                      }
                      else{
                        console.log("a is not undefined");
                      }

                      # output:

                      undefined
                      // for uninitialized variable a

                      a is not undefined
                      // after initializing variable a as 10


You My Friend Have A Great Day!!
Blockchain Day#1 : 5 Day Challenge
Tags: blockchain, security, challenge, devjournal
Published: 2021-08-29 08:30:47

Hey folks...

I am a full stack web developer. I love to develop responsive websites using the latest framework & library support. But As we all know that these days it is not enough having only one skill at a time. 

Blockchain, Bitcoin & NFTs are still in the development stage. There numerous amount of opportunities for entrepreneurs & business mindsets who are willing to start a company & earn the large amount of revenue. 

To upgrade my skillset & to contribute something new to this field I have decided to have a 5 days challenge of learning blockchain. In this challenge I will try to learn & develop something new using blockchain.

Day #1 : 
As blockchain is more about theory than practical, I decided to clear it's ground first.

1. Learned the decentralized system of blockchain
2. Completed the analysis of structural integrity of blockchain
3. Started learning about bitcoin & it's connection to blockchain
4. briefly Explored Bitcoin mining & it's rewarding system

Well, this doesn't seem like much but believe me theoretically, it is too much to grasp all this things in just a day.

After all this what I needed was Great course to kickstart my practical journey with blockchain. That's why I started to find a free course on blockchain.

Finally I have Found a good course on block chain which I will start from tomorrow.
-> The course is offered by world's one of the top leading Universities & also the course is of free of cost. 
-> Here's the link :- https://ocw.mit.edu/courses/sloan-school-of-management/15-s12-blockchain-and-money-fall-2018/video-lectures/session-1-introduction/

Finally, I ended my day with the basic learning about NFTs (non-fungible token) & it's increasing demand in today's market.

Day#1 Completed !! Now I am gonna go get my Tea [yeah you read it right ! Not every developer is fan of a coffee].

I hope that this guide will be helpful & will be able to become the part of your blockchain journey too.
Object.defineProperty & Getters , Setters in JavaScript
Tags: javascript, obect, webdev, beginners
Published: 2021-08-29 08:19:39

<b>DefineProperty</b> of an Object is one of the very important and very useful method to know.

You can configure the object in a way you want.

You can restrict the user from modifying the object property value.

There important terms you must know about defineProperty method

<b>configurable</b>
true if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object. Defaults to false.

<b>enumerable</b>
true if and only if this property shows up during enumeration of the properties on the corresponding object. Defaults to false.

<b>writable</b>
true if the value associated with the property may be changed with an assignment operator. Defaults to false.

<b>Getter & Setter</b>

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6danlkh53k3055syltp9.png)
  
Watch the video for detailed explanation

{% youtube _k3WiANNB4U %}
What are the characteristics of Object Oriented Design Principles ?
Tags: java, design, oop
Published: 2021-08-29 08:09:01

#### Object Oriented Design principles
Object Oriented Design principles help users to write high quality code. Today we will see what are the characteristics or what the design principles give when they are followed. To understand OO design principles you should know at least one OO programming. Here I have chosen to use JAVA. There are several principles and several names of the same principles. Here I will  list the most popular basic ones which are well received and well known. I will list here what the characteristics are.
1. Transparency 
2. Simplicity
3. Incremental development approach
4. Cohesion or Coherence and Coupling
5. Orthogonality

To read an explanation on each of the above five points you can refer to my [blog post](https://www.cloudnativemaster.com/post/what-are-the-characteristics-of-object-oriented-design-principles)
What would you Charge for this Wordpress Plugin ?
Published: 2021-08-29 08:01:11

Hi, 

My clients needs a wordpress plugin (Crypto based).

You can see a details here :
https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FUHaS3BmB%2F5e94bbff2c904d789faa82d9f326b507%2Fzora%20woocommerce%20plugin%20-%20nft.pdf?alt=media&token=16a5c969-5ec9-4074-a228-9792adbf1b47

He offer 500$ for this, if there is anybody here who can provide me this plugin for 500$ in crypto, feel free to contact me.

Thanks.
How to install python 3.9 on windows
Tags: python
Published: 2021-08-29 07:18:55

Assalamualaikum warahmatullahi wabarakatuh, hello everyone, on this occasion, we will learn together how to install python 3.9 on windows 10.

First, we visit python.org, we will download python through this website, because the official python site. The initial appearance of python.org is as follows:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7abvtmkx3tua45y35p16.png)

Click downloads, it will be directed to the download page.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgkm2sgolnn3ij4nkc6n.png)

Select the python 3.9.6 download button, because it is the latest version of python.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu9xkz1qei9jr9mzk9un.png)

Click double click, it will appear

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p88c8ko0vhk84sdbg92o.png)

make sure you check add python to path, this is useful so you can use python in cmd. While installing the launcher for all users is free, you want to check it or not, but my advice is to just tick it so that all users on the computer can use python. After that, click install now.
Wait until the installation process is complete

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqszbim79yqqloehwca3.png)

after python is successfully installed, we need to check whether python is successfully installed or not. Open cmd then type python command and enter.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0ijh1v3aib2mh9ukicc.png)

Enough of this article, thank you so much.
Complete Data Structures and Algorithms Roadmap for Placements (Part-1)
Tags: dsa, datastructure, interview, programming
Published: 2021-08-29 07:57:54

#### Part-(1/4) 
Mastering of DSA are always sought by big product-based companies because it ensures good handling of their data and provides a good measure of a candidate’s problem-solving skills. 

If you will follow this roadmap, then your preparation will be organized. Here are Topics and most imp problems from listed sub-topics
#Very Very IMP Topics

__Arrays & Strings__
<ul><li> Basic Array And Strings Questions</li>
<li>Kadane’s Algorithm</li>
<li>Dutch National Flag Algorithm</li>
</ul>

__Multidimensional Arrays__
<ul><li> Rotation based problems. </li>
<li>Traversal Based Problems</li>
</ul>

__Sorting Algorithms & Searching__
<ul><li> Insertion Sort </li>
<li> Selection Sort. </li>
<li> Binary Search on Arrays and matrices </li>
</ul>

__Linked Lists__
<ul><li> Reversal Problems</li>
<li> Sorting Problems. </li>
<li> Slow And Fast Pointers</li>
<li> Modify In Linked list </li>
</ul>

__Stacks and Queues__
<ul><li> Implementation Problems</li>
<li> Application Problems. </li>
</ul>

__Binary Trees__
<ul><li> Construction Of BST</li>
<li> Conversion Based Problems</li>
<li>Modification in BST</li>
<li>Standard Problems </li>
</ul>

__Recursion and Backtracking__
<ul><li> Basic Recursion Questions</li>
<li>Divide And Conquer</li>
</ul>


__Priority Queues and Heaps__
<ul><li> Implementation Based problems</li>
<li> Conversion based problems</li>
<li> K Based Problems </li>
</ul>


__Graphs__
<ul><li> Graph Traversals – BFS And DFS</li>
<li> MST</li>
<li>Shortest Path Algorithms</li>
<li>Topological Sort</li>
<li>Graphs in Matrix</li>
</ul>

__Dynamic Programming__
 on study material, daily ques, company wise Leetcode problems.
<ul><li> DP with Arrays</li>
<li>DP With Strings</li>
<li>DP With Maths</li>
<li>DP With Trees</li>
<li>Breaking And Partition Based Problems</li>
<li>Counting Based Problems</li>
</ul>

#After completing them, do these!!
- Hashmaps
- Tries
- Bit Manipulation
- Greedy
- Circular Queues
- String Algorithms like KMP and Z Algorithm
- Number Theory


### Stay tuned for the next post-

:sparkling_heart: _from sakshamceo_
What is Object Oriented Design(OOD)? Why use Object Oriented Design(OOD) Principles ?
Tags: java, oop, design
Published: 2021-08-29 07:55:37

#### What is Object Oriented Design(OOD)?

Object Oriented Design teaches us some basic design principles to write high quality Object Oriented programs. The principles are learned from the common mistakes done by developers. The principles are the guidelines for the developers to avoid the same common mistakes.
#### Object Oriented Design(OOD) Patterns vs Principles 

People might have heard about Design patterns and think we are going to talk about design patterns here.   Design patterns provide few well known best practices to be used for some well known circumstances/scenarios and tells about how different classes can be written and used together in each scenario.  

Object Oriented Design is more about basic principles, building blocks which programmers should keep in mind when they write programs. The Object Oriented Design principles can be applied in each design pattern, and in turn design patterns obeys the OO Design principles. That means they both are complementary and work together to handle different scenarios. 

#### Why use Object Oriented Design Principles?
Any developers who write programs using any object oriented programming language should keep in mind the design principles and examine the code after writing whether the code is aligned with the design principles. The reasons why we should do this is because the code base becomes:  

1. Easy to maintain(maintainability) 
2. Easy to extend(extendibility) 
3. Easy to understand(understandability)
4. Easy to test(testability)

Please read [my blog post](https://www.cloudnativemaster.com/post/what-is-object-oriented-design-why-use-object-oriented-design-principles) to for detail on above four points
Vue and Docx file
Tags: vue, docx, javascript
Published: 2021-08-29 07:51:17

Hey, my name is Shaked, and I want you to have the easiest time learning how to create and save a docx file client side.  So without more talking, let's start. 
By the way, this code is with Vue js, but this example can be used in any other framework, like React Angular and Svelte.
One last thing if you are using a server side framework like nuxt.js/ next.js, please use client-side rending for this component, so you do not have any issues with that (only when you create the file in the server-side life cycle hook)
```javascript
<template>
  <div>
    <div @click="exportDocx">
      Generate .docx file
    </div>
  </div>
</template>

<script>
import { Document, Packer, Paragraph, TextRun } from "docx";
// import { saveAs } from 'file-saver'; // you can use this also
const FileSaver = require("file-saver");

export default {
  methods: {
    exportDocx() {
      // Create a new Document an save it in a variable
      const doc = new Document({
        sections: [
          {
            properties: {},
            children: [
              new Paragraph({
                children: [
                  new TextRun("Hello World"),
                  new TextRun({
                    text: "Foo Bar",
                    bold: true,
                  }),
                  new TextRun({
                    text: "אני אדם כמו כל אדם אחר בעולם חחחחחחחחחח הצחקתי את עצמי ",
                    bold: true,
                  }),
                ],
              }),
            ],
          },
        ],
      });
      const mimeType =
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const fileName = "test.docx";
      Packer.toBlob(doc).then((blob) => {
        const docblob = blob.slice(0, blob.size, mimeType);
        FileSaver.saveAs(docblob, fileName);
      });
    },
  },
};
</script>
```
Create a simple calculator component in React
Tags: react, emotion, npm
Published: 2021-08-29 07:49:32

I created a React Component for a simple calculator.
Here is a brief explanation of why I made it and how to use it.

https://github.com/wattanx/simple-react-calculator

## Why?
I wanted to create and publish some React Component.
I also wanted to make it available as a reference on how to publish React Component and npm packages.

## Install
To use simple-react-calculator, all you need to do is install the simple-react-calculator package and its peer dependencies.

```
npm install simple-react-calculator @emotion/react @emotion/styled
```
or
```
yarn add simple-react-calculator @emotion/react @emotion/styled
```

## Usage
```typescript
import { ReactCalculator } from "simple-react-calculator";

const Example = () => {
  return <ReactCalculator />;
};
```

## Why using emotion?
When selecting a CSS in JS library, I was torn between `styled-components` and `emotion`.

According to the following article, `emotion` has slightly better performance, so I decided to use emotion.

https://dev.to/meetdave3/styled-components-vs-emotion-js-a-performance-perspective-4eia

I also decided to use emotion because my favorite library, [Chakra UI](https://chakra-ui.com/), uses emotion.

If you think it looks interesting, please try to make it.

If you have any suggestions or questions please let me know in the comments.

Thanks for reading!
Fylgja a new CSS framework, WHY!
Tags: fylgjacss, css, framework, frontend
Published: 2021-08-29 07:40:14

Time to introduce Fylgja a new CSS framework, there are already a lot of CSS frameworks, almost everybody knows Bootstrap, Material and Tailwind.

None of them are bad, each of them does the job, and if one of them fits the way you are working, you're probably happy.

Looking around on dev.to you would find articles, describing CSS frameworks and their pros and cons, for example;

{% post chetan_atrawalkar/20-best-css3-library-for-developers-58p %}

{% post vetheedixit/11-best-css-frameworks-to-look-forward-in-2020-3p3p %}

{% post theme_selection/best-css-frameworks-in-2020-1jjh %}

{% post pravunathsingh/battle-of-the-frameworks-which-one-to-choose-and-why-27ke %}

> The Best is of course opinionated, choose what works for you,
> and always check Github to see if there is active development.
> A dead framework is not a great investment.

So why! Fylgja, well because its a very good tool for frontenders who understand CSS and need a consistent basis for their projects.

Some history, years ago we started working with Bootstrap 2, using it for frontend design, we developed it as an extend / utility pack to give us tools to work better and faster.

Initially developed with LESS and Grunt we switched to SCSS and GULP, and it became a daily tool for us, [read the full story here](https://fylgja.dev/about). 

On the road we learned from others and we continuously kept developing it to improve things, and since we are only human and are proud of our product we like to share it with you all.

We put it on Github and released version 1 on 22 June this year, you can find  the Website with the documentation on [Fylgja.dev](https://fylgja.dev)

Of course, we could fill this article with exaggerating marketing text, telling you how good it is, and why we’re the best (we are 😁) but no BS here, Take a look, try it out, use it and contribute if you like.

{% github fylgja/fylgja no-readme %}