teleren/devto huggingface dataset:
Technology is Evolving and future is bright
Tags: technology, computerscience
Published: 2021-01-27 06:51:47

Now a days, technology is going through an era, in which it is evolving itself. Not only in the field of computer sciences but in the latest fields of science like <a href="https://www.techynoobs.com/2020/09/ai-artificial-intelligence-search-areas.html">artificial intelligence</a> and others, tech lovers are making a worth. 

If you are the one, who is interested about learning the evolution of technology and future of the computer science and the other tech branches such as, get started with this article with us. 

In past, there was a time, when each and every body has to done the large business calculation through their hands. Then a machine was invented which is then named as the computer. This machine, without any doubt has changed the way of living and make us to live a fast and easy life. Now with the evolution of the many of the sub technologies with the computer. It has become more easy to compute the larger calculations. 

So the need for this time is that we should keep get in love with the computer technology for our bright future. 

The author is a blogger at the website <a href="https://www.techynoobs.com">Technoobs</a> and if you have any question, simply contact with him at this site or at his own blog.
Making storybook 6 auto-generated control to work with a story template which contains an Angular component
Published: 2021-01-27 06:44:12

ENV

Angular version: 10.0.4
Storybook version : 6.1.15

When I tried to write a storybook story with an Angular component, it works fine when I followed the [Official Docs](https://storybook.js.org/docs/angular/writing-stories/introduction). However when I add a template to the storybook Template like below, the control stops working.

```javascript
const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component label="test"></lib-component>`,
});
```

I also tried the following and it still does not work.


```javascript
const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="args.label"></lib-component>`,
});
```

The browser complained that args is undefined.

```
ERROR TypeError: _co.args is undefined
```

After several attempts, I finally figured it out.
The correct way to write a template is to get rid of the args for whatever reason.
The following code works for me. 

```javascript
const Template: Story<ComponentComponent> = (args: ComponentComponent) => ({
  component: ComponentComponent,
  props: args,
  template: `<lib-component [label]="label"></lib-component>`,
});
```
DevOps Online Training with Placements
Tags: devops, devopstraining, devopsinpune, devopstool
Published: 2021-01-27 06:28:31

Looking for DevOps online training with Experts?
	
What is DevOps?
The goal is to bridge the gap between IT operations and development to improve communication and collaboration, create more seamless processes, and align strategy and objectives for faster and more efficient delivery.

We are providing online certification in Pune on DevOps online training with live projects so you will get practical experience with highly experts. We have experienced trainers who provide industrial-based knowledge and share their own experience in the IT world. We can assure you that after completing this online training in DevOps you will be able to develop and configure products using DevOps.

Get Certified in DevOps Framework with Best Institute.
DevOps with Industry Expert.
 join Us and get certification with placement assistance.
Site URL:  https://devopstraininginpune.com/courses/devops-online-training/
Contact :  741 007 3340
Twitter : https://twitter.com/@devopstraining4
How to use browser history to pass data in Angular navigation
Tags: angular, typescript, snippet
Published: 2021-01-27 06:09:10

**Project**: [`Codever`](https://github.com/CodeverDotDev/codever) - **File**:  `snippet-form.base.component.ts`

In the `router.navigate` method place the object /data in the `state` field of the navigation `extras` parameter

```typescript
//  constructor( protected router: Router) {}

  navigateToSnippetDetails(snippet: Codelet, queryParams: Params): void {
    const link = [`./my-snippets/${snippet._id}/details`];
    this.router.navigate(link, {
      state: {snippet: snippet},
      queryParams: queryParams
    });
  }
```

To receive on the the other end of the line, just look for it in `window.history.state`

```typescript
  ngOnInit(): void {
    this.popup = this.route.snapshot.queryParamMap.get('popup');
    this.snippet$ = of(window.history.state.snippet);
    if (!window.history.state.snippet) {
      this.userInfoStore.getUserInfo$().subscribe(userInfo => {
        this.userId = userInfo.sub;
        this.codeletId = this.route.snapshot.paramMap.get('id');
        this.snippet$ = this.personalCodeletsService.getPersonalCodeletById(this.userId, this.codeletId);
      });
    }
  }
```

<hr/>

<span style="font-size: 0.3rem">
  <strong>Reference - </strong> <a href="https://angular.io/api/router/NavigationExtras" target="_blank" style="font-weight: lighter">
     https://angular.io/api/router/NavigationExtras
  </a>
</span>

<hr/>

<p class="note_normal">
  Shared with love from <a href="https://www.codever.dev/snippets/5fe47dd246ff736c274b92c9/details">Codever</a>.
  Use the <a href="https://www.codever.dev/snippets/5fe47dd246ff736c274b92c9/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a> functionality to copy this snippet to your own personal collection and easy manage your code snippets.
</p>
LeetCode 322. Coin Change
Tags: algorithms, javascript
Published: 2021-01-27 05:53:38

###Description:
You are given coins of different denominations and a total amount of money amount. Write a function to compute the fewest number of coins that you need to make up that amount. If that amount of money cannot be made up by any combination of the coins, return -1.

You may assume that you have an infinite number of each kind of coin.

###Example 1:
```
Input: coins = [1,2,5], amount = 11
Output: 3
Explanation: 11 = 5 + 5 + 1
```

###Example 2:
```
Input: coins = [2], amount = 3
Output: -1
```
###Solution:
n = coins.length
m = amount
Time Complexity : O(n*m)
Space Complexity: O(m)

```javascript
// Tabulation solution
// Create an array where array[i] = least number of coins to make i
var coinChange = function(coins, amount) {
    // Array to hold the number of coins needed to make each amount
    const dp = Array(amount+1).fill(Infinity);
    // To make 0 you would not use any coins
    dp[0] = 0;
    
    // Fill the array with number of coins to make each i amount
    for(let i = 1; i < dp.length; i++) {
        // Find coins that can make amount i
        for(let coin of coins) {
            // If a coin can make the current amount check if this coin
            // is used in the sequence that uses fewest number of coins 
            // to make this amount
            if(i-coin >= 0) dp[i] = Math.min(dp[i], dp[i-coin]+1);
        }
    }

    return dp[amount] === Infinity ? -1 : dp[amount];
};
```
PHP Cheatsheet for Rubyists
Tags: php, cheatsheet, ruby, syntax
Published: 2021-01-27 03:11:40

This is a quick cheatsheet for every Rubyist struggling to remember PHP syntax.

## Variables
**Ruby**
Variable names can begin with an alphanumeric character or an underscore, but not a number. Local variables don't require any keywords. Variables are case sensitive (name and Name are two different variables). Conventionally, variables begin with a lowercase letter, and snakecase is used for multi-word variable names. You must assign a value to a variable when it is initialized, even if that value is 0, an empty string, or nil.

Instance variables are initialized with the @ symbol, class variables with two @@, and global variables with a $.
```
name = "Ginny"
Name = "Jennifer" 
p name # "Ginny"
p Name # "Jennifer"
your_name = "Ted"
_energy = nil
@@name = "Liz"
$tater = "Tot"
```

**PHP**
PHP variables **always** start with a dollar sign ($) and all variable declarations (all lines in PHP actually) must end with a semicolon (;).  Other than that, PHP and Ruby variables have very similar rules. Variables names can start only with an alphanumeric character or an underscore, never a number. Variables are case sensitive.

However, you can declare a PHP variable without assigning it a value. Also, multi-word variables names can be camel- or snakecase.
```
<?php
$tatertots;
$name = "Liz";
$hours_of_sleep = 0;
$tatertots = 3;
```
## Comments
**Ruby**
Single line comments begin with a hash.
```
p "Pay attention to this." #ignore this
```
Multiline comments begin with `=begin` and end with `=end`.
```
p "Print this."
=begin
Don't print this.
Also, don't look at this.
It's not pretty enough to be part of Ruby.
=end
```
It's very common to see hashes across multiple lines.
```
p "This is common"
#Even though
#they are
#for single lines
#technically
```
**PHP**
Single line comments start with two forward slashes ( // ). Multi-line PHP comments start with a forward slash and a star (/*) and end with a star and a forward slash (*/), similar to multiline CSS comments.
```
<?php
echo "This will print to the screen." //But this will be ignored.
/*
This will also be ignored
*/
```

## Arrays
**Ruby**
There are two ways to create an array in Ruby:
```
my_array = Array.new
your_array = [1, 2, 3]
```

**PHP**
There is a grand total of one way to create an array in PHP:
```
<?php
$this_array = array(1, 2, 3);
```
TIL about Playables
Tags: todayilearned, unity3d, gamedev
Published: 2021-01-27 05:20:18

2021-01-26

This is a very interesting time for me to get into Unity because it's undergoing a lot of growing pains. I often see new features on the horizon and remnants of old ones.

I stumbled upon Playables thru a context menu and wondered what it was about. It seems to be a graph-based system for synchronizing the playback of different Unity systems. 
```
// Factory method that generates a playable based on this asset
public override Playable CreatePlayable(PlayableGraph graph, GameObject go)
{
    return Playable.Create(graph);
}
```
After some digging around, turns out it's an "experimental" feature from an older version of Unity which probably means "stay away" or perhaps "stay very far away"
How to modularize optional search conditions? enum and taglib ultra simple programming web development
Tags: jsp, java, spring, taglib
Published: 2021-01-27 04:37:24

{% youtube zxvnnpjhZYo %}

I made only a checkbox for the video,
If you make modules up to radio and select
If you only add taglib where you need it and use it
The input form values are completed in the search conditions and registration/edit screens really simply.
Hire Magento Developers, Certified Ecommerce Experts | Mconnect Media
Tags: magento, magentoextensions, hiremagentodeveloper, ecommerce
Published: 2021-01-27 04:36:59

Looking to Hire Magento Development service which can transform your online store by deploying modern techs that make you a leader in your industry? Well, hiring a skillful development agency is a tedious but most important process. You need to consider two things before hiring any developer agency for your requirements. First, look at their past work and experience portfolio, and second, are they Certified <a href="https://www.mconnectmedia.com/magento-developers-for-hire">Hire Magento Developers</a>? Because you don’t want to hire some immature guys who don’t even know what they are doing. You need to hire Magento programmers who can work extensively on your project and completes it within the deadline. And Mconnect is one such Magento Developer agency you should hire.
 
The new technological inventions are happening every day in the field of online shopping. It is essential to adopt such modern techs to stay ahead in the competition. Even if you want to start from scratch, the adroit Magento developers will help you to be profitable in your eCommerce operations. And not only that, they can handle your small to large scale multiple eCommerce projects with ease. A Certified and dedicated team of Magento developers will make your online store’s usability and functioning smooth and zealous. They can perform any integration, customization, programming, and other tasks with such ease. And all this helps you to achieve your business goals fervently. 

Why Hire Magento Development Service from Mconnect Media?

We have experience of 12+ years in the Magento development and programming field. And in the past, we have completed many projects with world-renowned companies. Thus, satisfying the two conditions of hiring any developer. Our team of adroit developers consists of designers, coders, SEO experts, QA, and project managers. We possess sound knowledge of all the ins and outs of the Magento 1 and Magento 2 platforms. The unique design solutions from our team of experts will refine your store’s usability to achieve the goals of your business. So, you don’t have to worry about anything at all because we have got you covered. 

Here are a few reasons why you should believe in us and hire our Magento Development Service,

Our full-stack developers are adroit to build your Magento store from scratch. 
We are capable and competent enough to manage small to large scale projects.
Our Magento wizards are experts in handling complex projects with ease.
We have sound knowledge about all the ins and outs of Magento development.
We can perform various tasks and provide support for your various needs.
The unique solutions from Mconnect developers will fulfill your goals of operating a profitable business.
A dedicated team of Certified Magento Developers will take care of all your needs.
Benefits of hiring the whole development team.
The adroit team consists of website designers, developers, coders, QA, and project managers.
Data Flow Pada Redux
Tags: redux, react, javascript
Published: 2021-01-27 04:18:31

Ketika kita membuat aplikasi react biasa, yang terjadi dibalik layar adalah sebagai berikut:

1. Kita membuat state untuk suatu komponen.
2. UI merender state tersebut.
3. Ketika terjadi action pada UI, seperti mengeklik tombol, **state awal tersebut akan terupdate**.
4. Lalu, UI akan merender state yang telah diupdate tersebut.


Namun, langkah tersebut akan sangat rumit ketika aplikasi kita mempunyai banyak state, maka dari itu kita memerlukan redux.
Redux akan menyimpan seluruh state kedalam sesuatu bernama **store**, jadi ketika aplikasi kita ingin mengupdate state, kita hanya perlu memanggil store tersebut. Seperti ini alurnya.

![pic](https://dev-to-uploads.s3.amazonaws.com/i/e37ud80ju431rz97ptlp.png)


Rancangan redux

1. Redux store dibentuk.
2. Store tersebut membuat kumpulan state yang bernama reducer.
3. Ketika komponen akan merender, maka komponen tersebut akan memilih, state mana yang akan di render. Komponen tersebut juga akan terus memperhatikan state yang ada di store tersebut, hal ini yang dinamakan dengan **subscribe**

Update state

4. Ketika user mengeklik tombol, maka komponen tersebut akan mengirim data tersebut ke dalam store menggunakan fungsi dispatch `dispatch({type: 'nama aksi'})`.
5. State yang berada di store tersebut lalu akan mengupdate state yang diterima oleh fungsi dispatch tersebut.
6. State tersebut telah berubah, lalu komponen yang telah subscribe ke store tersebut mengupdate state nya.
How to change constants and useEffect in reactjs from a function to a render component
Tags: react, reactnative
Published: 2021-01-27 02:58:32



I have this code in a function

function Lobby () {
but I wanted to pass it on to class Lobby extends Component { for a component with

render () {
    return (
but putting these const and useEffect ect .. gives me an error, is there any way to "translate" this into a component?

I thank those who can help me

original code:

   function Lobby () {
    const [message, updateMessage] = useState('')
    const [messages, updateMessages] = useState([])

   

 useEffect(() => {
        const handleNewMessage = newMessage =>
            updateMessages([...messages, newMessage])
        socket.on('chat.message', handleNewMessage)
        return () => socket.off('chat.message', handleNewMessage)
    }, [messages])

   

 const handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            updateMessage('') 
            
const recibesound = document.getElementsByClassName("audio-element")[0]
        recibesound.play()
        
   

 }

}

const handleInputChange = event =>
updateMessage(event.target.value)

////teste
const handleTesteChange = event =>
updateMessage(event.target.value)

const handleTesteSubmit = event => {
    event.preventDefault()
    if (message.trim()) {
        socket.emit('chat.message', {
            userid: myId,
            message
            
   

 })
    updateMessage('') 
   
}

}
///teste



  

  return(  <div>
     //html
    </div>
)}
    
 

   export default Lobby;
goal:

class Lobby extends Component {

// same code


 render() {
   return(

<div>
 //html
</div>

 );
  }
}
Making an Airbnb clone in Vue3 (Desktop + Mobile PWA) + Admin Backend
Tags: vue, javascript, angular, react
Published: 2021-01-27 04:02:56

I think I just finished the Airbnb clone that I worked for over 4 months. My back is hurting, unshaved, eyes hurt, I can barely watch TV.
I had to make a desktop version and mobile version as well. Bonus, an installable PWA for both desktop and mobile.
And a backend for api ..

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tombicbh6vtq08do5phz.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tirjzc5h20cnksev43z0.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dockdrmrhaojnh15eqfl.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bcltp9zxjq794q0mabhg.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l6gyv4vvu2fu2c6pt7tx.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h9110x0atwq5zesi16ev.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y2zfjv5fx34trykn1udz.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3yk7e0tvkf13qpk03dwj.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wajnslxcvr30bdxmg6wm.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iqg7gixnr84qnr1frcuu.png)


Project is huuuge! remember; just one person as a hobby.
So; the project is written in Vue 3 with composition API, all the new stuff, all the bells and whistles.
Let me know what you think …

**Demo client-side** [https://airbnb-cloudcdn.surge.sh/rooms/23049796](https://airbnb-cloudcdn.surge.sh/rooms/23049796)

Not working if you use proxy vpn etc..

**Animated GIF Screenshot** [https://dev-to-uploads.s3.amazonaws.com/i/lhs207ewg4tin3l7tuxk.gif](https://dev-to-uploads.s3.amazonaws.com/i/lhs207ewg4tin3l7tuxk.gif)


**Demo mobile**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g4dubq50l57qycj1lei7.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srmws88r9p5ijy6bgkjn.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i861iy3ef0zi2zzc4st2.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jubfxxmgwz3x0eyxriej.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njm5fmeya0l646zjpzci.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/djfove5wkw7jjynrmt6g.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s00ng33mmvn4uje3anqg.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gr7rdk6y36he25dxqfk7.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/04ukiybe0lbbm76nmcvk.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3js32187aw2zm04bxra.png)
Code Smell 59 - Basic / Do Functions
Tags: webdev, codenewbie, cleancode, tutorial
Published: 2021-01-27 03:14:08

*sort, doSort, basicSort, doBasicSort, primitiveSort, superBasicPrimitiveSort, who does the real work?*

TL;DR: Shortcuts for mini wrappers shout for better solutions.

# Problems

- Readability

- Bad Naming

- Low Cohesion

- Single Responsibility Principle
 
# Solutions

1. Use good object wrappers

2. Use dynamic decorators

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/dd988af705942cfafd5811df60acaed2)
```php
<?

final class Calculator {

    private $cachedResults;

    function computeSomething() {
        if (isset($this->cachedResults)) {
            return $this->cachedResults;
        }
        $this->cachedResults = $this->logAndComputeSomething();
    }

    private function logAndComputeSomething() {
        $this->logProcessStart();
        $result = $this->basicComputeSomething();
        $this->logProcessEnd();
        return $result;
    }

    private function basicComputeSomething() {
        /// Do Real work here
    }

}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/ce98c6db785d947e77790c3cc6b4bad0)
```php
<?

final class Calculator {
    function computeSomething() {
        // Do Real work here since I am Compute!
    }
}

//Clean and cohesive class, single responsibility

final class CalculatorDecoratorCache {

    private $cachedResults;
    private $decorated;

    function computeSomething() {
        if (isset($this->cachedResults)) {
            return $this->cachedResults;
        }
        $this->cachedResults = $this->decorated->computeSomething();
    }
}

final class CalculatorDecoratorLogger {

    private $decorated;

    function computeSomething() {
        $this->logProcessStart();
        $result = $this->decorated->computeSomething();
        $this->logProcessEnd();
        return $result;
    }
}
```

# Detection

We can instruct our static linters to find wrapping methods if they follow conventions like *doXXX()*, *basicXX()* etc.

# Tags

- Declarativiness

# Conclusion

We came across this kind of methods some time in our developer life, We smelled something was not OK with them. Now is the time to change them!
 
# More info

{% post https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd %}

%[https://en.wikipedia.org/wiki/Wrapper_function]

%[https://en.wikipedia.org/wiki/Decorator_pattern]
 
# Credits

Photo by <a href="https://unsplash.com/@roger3010">Roger Bradshaw</a> on <a href="https://unsplash.com/s/photos/recursive">Unsplash</a>

* * *

> The primary disadvantage of Wrap Method is that it can lead to poor names. In the previous example, we renamed the pay method dispatchPay() just because we needed a different name for code in the original method.

_ Michael Feathers_
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}