teleren/devto huggingface dataset:
web / mobile app + API
Tags: help, symfony, vue
Published: 2020-07-04 18:57:46

Hello everyone!
I   have a problem to design the structure to my  application so I would   like to have your advice and feedback about your  experiences.
I   have an application in Symfony + twig, and I would like to develop a   mobile app. To do it, I was thinking about an API, I could connect my   mobile app, and use a front-end framework for the web app.
However I don't know how to construct it, will I do something like that:
site.com : web app symfony + Vuejs (for example) that requests my api
api.site.com : that return json data and establishes the connection / logging part (an other symfony ?)
mobile.site.com : for my mobile app
Would that mean to have two subdomaines and three differents "projects"?

An other solution :
Is it possible to have site.com with a /api route ? Would it be easy to set up and handle the different routes between front-end framework (all routes exclude /api ) and back-end (API, only /api routes). And the mobile app would call this route ?
Sorry for my bad English :(
data/event binding question
Published: 2020-07-04 18:55:11

Hi, i'm new to Angular..
I am trying to do a filter pipe on a list of products.
The search box is in a seperate component and the prod list is in a seperate compoment.
i'm not able to get the 2 to communicate.

--------code snippet--------
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent implements OnInit {
  searchword;
  @Output() searchcriteria = new EventEmitter<string>();
  searchThis() {
      this.searchcriteria.emit(this.searchword);
  }
  constructor() { }

  ngOnInit() {
  }

}
----------------
import { Component, OnInit, Input } from '@angular/core';
import { ProductService} from '../product.service';

// import * as  products from '../phones/phones.json';
// import { products } from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit {
  products;
  @Input() searchCriteria;
  // products: any = (products as any).default;
  //  products = products;
  searchThis(data) {
    window.alert(data); --> trying to get the searchText here.
  }
Learning Rust
Published: 2020-07-04 18:47:11

I am learning Rust Programming in a hope that one day I will be a full time Rust developer.

I am an IT Manager as of now...and the work I do on daily basis is not the work I want to do for rest of my life.

In short my current job sucks..like really really sucks...

If anyone is like me and learning Rust ...please ping me or comment..I will be really happy to talk to like minded people.
Celebrate your independence from Youtube & Udemy w/ these 3 free sites that will help you learn and practice web development
Tags: webdev, html, tutorial, javascript
Published: 2020-07-04 18:45:23

# The three free sites
1. [FreeCodeCamp.org](https://FreeCodeCamp.org)
2. [FreeCodeGame.com](http://freecodegame.com)
3. [FrontEndMentor.io](https://frontendmentor.io)

## Why they are guaranteed to help you learn and practice web development
* You'll be forced to write code, not watch someone else write it
* You'll be forced to practice Test-Driven Development, a methodology that the company you want to work for practices
* You'll be forced to think critically about the code you're looking at, and what you have to do to fix it
* You'll be forced to use necessary tools like Git, React/Vue/Angular, Icon libraries, SVG, CSS Flexbox and Grid, APIs, and much more

## Stop searching for the next cheap but hopefully effective way to learn. You found them.

Happy learning!
People who failed their programming career.
Published: 2020-07-04 18:42:54

Hi

Let me tell you first...I am one of you. I failed as programmer. I started my career as a programmer but soon I jumped to other things...why I did that...I am not sure.

There was something in me who want to explore everything...who wants to know everything..

But after spending 10 years in IT, I came to know that you don't need to know everything...you are not suppose to all rounder..just follow the Unix philosophy..do one thing right..

I am now trying to get back to programming. I want to be a programmer again......but life has no rewind button..world is different what it was in 2008  - the year I started my journey.

So, please, please don't go by the hype...what is cool..what is hot...just learn the basics and just stick too what you really want to do..doesn't matter if its cool right now or not.

I'd appreciate any comment or if any one want to share his/her experience in comments..
Automated Birthday Wisher using Python
Tags: python, automation, showdev
Published: 2020-07-04 18:31:52

Hello guys, To kaise hain aaplog?
Ashutosh here again with another Python mini project.
Are you bored of sending birthday wishes to your friends (well,some people are) or do you forget to send wishes to your friends or do you want to wish them at 12 AM but you always fall asleep? Why not automate this simple task using our friend, Python!!!
To chaliye shuru karte hain…
The first thing you have to do is to install pandas on your system using pip install pandas command. We shall use datetime module and SMTP library here to send the mail.
Also create an excel sheet containing Name , Email , Contact, Birthday and Year.
{% gist https://gist.github.com/ashutoshkrris/efaa765a892bdce46add539a90f0927f %}

First thing we do is import five libraries : pandas, datetime, smtplib, requests and win10toast.
Then we put our gmail credentials in order to login. We define a sendEmail() function which will start a gmail session , send the email and quit the session.
For the SMS part, we must have an account on www.fast2sms.com from where we will get an API key. This API key is used to send SMS over mobile numbers using your account on fast2sms. We have a sendsms() function which will verify the API key and send SMS.
In the main function, we read the excel sheet and match today’s date with any of the birthdays. If there is a match, we call the sendEmail() and sendsms() functions and also we add the current year in the excel sheet.
Also, we have used ToastNotifier from win10toast library to show desktop notifications once the e-mail and SMS has been sent successfully.
To automate the task, we use Task Scheduler in Windows.
I have mentioned all the steps to automate the task in my Github repository :
{% github ashutoshkrris/Automated-Birthday-Wisher no-readme %}

I will also soon be publishing it on [GeeksforGeeks](https://www.geeksforgeeks.org/).
Briefing 19
Published: 2020-07-04 16:59:36

*Original Post Date: 5/4/2020*
*Author: IvanCoHe*

## Hey! So after calming down a bit from the hype I am now able to actually take a look at it! So yeah. Let's go!

**WAREHOUSES.** Ok so this is actually cheating it's not only Warehouses here. By this I mean, we haven't seen warehouses. We know these are in game though, however we have also not seen some other, uh, i'd say pretty important stuff. Don't get me wrong, I like what we've seen, but it looks like there's no Propane Stations, Colored farmbot variants and modular spudguns. This kinda preoccupies me. Of course, there's still a chance this is just not in the prerelease, but I'm kinda skeptical. I like the game so far, but I was really hoping for some more enemy variety even if it was just the different colors. Which leads me to my next point:

**What don't we know about?** This might seem like a dumb question but until 2 days from now we didn't really know about slave trading. So I think we still lack some stuff. It seems like some of the ambitious stuff might have gotten cut, like Scrapyards and Propane Stations. I think about half of these are just not on the prerelease, but IDK, this might end up being smaller than we thought.

**At the end of the day though, the game is great.** The update already looks amazing. I can't wait to hop into creative and see everything new! Only 3-2 days to go!

**I'm off for now! Bye!**
How I converted ~1MBPS to 200 MBPS Internet Speed for my desktop
Tags: devops, linux, beginners
Published: 2020-07-04 18:17:41

>Important Request:
(1) Read full article.
(2) Nothing magic happening. Article let you know about advantage of using of desktop in cloud.
(3) MBPS / GBPS are written in capital letters for shake of easiness. Please refer screenshots in article also disclaimer at end. Everyone knows difference between Mbps and MBPS. 
(4) If you don't know anything thing about VDI or Remote desktop, you will feel something like " Free Electricity". 
(5) If you find title a clickbait. You are most welcome to close this article and browse some other.

I've got 'GigaFiber' as an internet plan at home. My plan gives me about 1000 GB per month at a speed of 1GBPS, which is then reduced to less than 1 MBPS. I've hardly been able to exhaust 1000GBs.

A week ago , I decided to exhaust all these data and see exactly how the devices run at a speed of less than 1 MBPS.

![my home speed](https://dev-to-uploads.s3.amazonaws.com/i/ddgmh94yideiexx1wnz6.png)

All of the devices are very slow ... Hardly capable of surfing the internet at this speed.

I've been experimenting to bring the full Gnome desktop environment to my remote desktop. Gnome is very resource-intensive, so Xfce is recommended as the first and last choice for every remote desktop.

However, I considered it a challenge made *some changes to Gnome Desktop to make it behave as lighter than Xfce as a remote desktop*.

***Yes to my surprise***, the remote desktop (gnome) is acting faster than its counterpart Xfce. Also, I was able to bring a full gnome desktop inside the browser tab.

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

700Kbps Home Desktop Speed is enough to render the UI of my remote desktop in the browser. Since my remote desktop has a speed of 200 MBPS, I can surf the net at a speed of 200 MBPS even at a speed of fewer than 1 MBPS.

######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).


###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)


###### image credit: undraw,manishfoodtechs

Update: please note:
(1) Here speeds are notionally written in capital letters MBPS / GBPS for shake of easiness. Be bit practical.
(2) I am surfing my remote desktop in browser. My desktop speed is less but my remote desktop is having very good speed.
(3) This is custom built remote desktop. This is why I am able to have gnome desktop as remote desktop .
XMonad changeDir
Tags: haskell, xmonad, linux
Published: 2020-07-04 18:11:14

One of the changes I made in my workflow is stop using tmux, screen or any other terminal manager in my local machine and let XMonad handle everything. 

There was a little thing I had using tmux I never managed to solve in XMonad and it is the fact that when I opened a new terminal the current dir was always home directory instead of the base dir of the project I am working on. 

I've just recently found [WorkspaceDir in xmonad-contrib](http://hackage.haskell.org/package/xmonad-contrib-0.16/docs/XMonad-Layout-WorkspaceDir.html) to let you change your current directory in your workspace.

That creates a beautiful mental model where you spawn a new terminal and it automatically starts in the place you expect it to be. 

To do that you just have to assign the shortcut to a call to `changeDir :: XPConfig -> X ()`. For example in my case, using additionalKeysP:

```haskell
import XMonad.Layout.WorkspaceDir

[...]

("M-c", changeDir <your prompt config>),

[...]

myLayouts = workspaceDir "~" $ <rest of your layout config>


```

That way you can just pop up a beautiful dialog to change folder:

![change folder dialog](https://dev-to-uploads.s3.amazonaws.com/i/4cceqove748g3qs7p7i6.png)

You can check [my config](https://github.com/rafadc/dotfiles/blob/master/wm/xmonad/xmonad.hs) as a reference.

Photo by [Georgie Cobbs](https://unsplash.com/@georgie_cobbs?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/workspace?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Hey Python 🐍, say cheese 🧀
Tags: python, beginners, todayilearned, career
Published: 2020-07-04 17:52:54

![Mickey](https://media.giphy.com/media/O8UDqywC49kac/giphy.gif)

Hey, I welcome back y'all to the sixth edition of the series `can-python-do-that`. I hope you find this post informative.


This week let's surf 🏄‍♂️ over three image processing libraries in `python` 🌊.

- Scikit Image
- Pillow
- OpenCV

## [Scikit Image](https://scikit-image.org/)
![Scikit Logo](https://scikit-image.org/docs/stable/_static/img/logo.png)
**scikit-image** It is a fairly simple and straightforward library, even for those who are new to Python's ecosystem.  This is a collection of algorithms for image processing. It is available free of charge and free of restriction. 
[Docs](https://scikit-image.org/docs/stable/)
[Code Examples](https://scikit-image.org/docs/dev/auto_examples/)

## [Pillow](https://python-pillow.org/)
![PIL Logo](https://python-pillow.org/images/pillow-logo.png)

Pillow is the friendly PIL fork. PIL is the Python Imaging Library. The library contains basic image processing functionality, including point operations, filtering with a set of built-in convolution kernels, and colour-space conversions. This library provides extensive file format support, an efficient internal representation, and fairly powerful image processing capabilities.

The core image library is designed for fast access to data stored in a few basic pixel formats. It should provide a solid foundation for a general image processing tool.

[Docs](https://pillow.readthedocs.io/en/3.1.x/index.html)

[Tutorial](https://pillow.readthedocs.io/en/3.0.x/handbook/tutorial.html)

## [OpenCV](https://pypi.org/project/opencv-python/)
![Open CV Logo](https://opencv-python-tutroals.readthedocs.io/en/latest/_static/opencv-logo-white.png)
**OpenCV** (Open Source Computer Vision Library) is one of the most widely used libraries for computer vision applications. OpenCV-Python is the Python API for OpenCV. OpenCV-Python is not only fast because the background consists of code written in C/C++, but it is also easy to code and deploy (due to the Python wrapper in the foreground). This makes it a great choice to perform computationally intensive computer vision programs.

[Docs](https://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_setup/py_intro/py_intro.html)

[Tutorial](https://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_setup/py_intro/py_intro.html)



![Thanks GIF](https://media.giphy.com/media/upg0i1m4DLe5q/giphy.gif)

Peace ✌🏻,
Rohith Gilla
Javascript Explained | Sketch-notes PART3
Tags: javascript, webdev, tutorial, sketchnotes
Published: 2020-07-04 17:48:26

Hey There! 🙌🏾

Here are the past week's **#sketchnotes** that I created for my *'You Don't know JS'* series that I post on **twitter**:

This one shows how **scope** is treated differently for variables declared using **var** and **let**:
{% twitter 1276471152517341184 %}

This one explains the weird stuff that happens when you try to assign to a **non-existing** variable:
{% twitter 1272543177816150018 %}

Do follow me on twitter if you like those in order to get access to them the day I post them there. 

Cheers!
RxJS Operators: distinctUntilChanged & distinctUntilKeyChanged
Tags: javascript, webdev, rxjs, angular
Published: 2020-07-04 17:47:35

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

As per the official doc, RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

While performing the input search by keyword, we generally use the distinctUntilChanged operator.

Today, we will try to explore both of the rxjs operators.

Going by the official definition:
**distinctUntilChanged: It returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.**

The sequence diagram for the **distinctUntilChanged** is attached below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3e460b9mla0aswignb51.JPG)

If we have a look at the compare function, it compares the distinct item from previous item from the source.
 
**Also, we skip the compare function, it does the equality check by default. (applies to distinctUntilChanged && distinctUntilKeyChanged)**

If we are trying to compare for the primitive values, we will consider the **distinctUntilChanged** operator. See the example below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6les1t6oize9s6h963ae.JPG)

Now, let's try to do some variations with the custom objects.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2p5o2d52asgem0il55ro.JPG)

If we see the example, we are trying to compare with "username" property, if it's distinct, we will take the value, otherwise it will be skipped.

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

Let's move on to the different flavor, which is **distinctUntilKeyChanged**

**distinctUntilKeyChanged: Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item, using a property accessed by using the key provided to check if the two items are distinct.**

The sequence diagram for the **distinctUntilKeyChanged** is attached below:

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

If we have a look at the compare function, it compares the distinct item from previous item from the source.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9p8vqexslkiduuawqzuu.JPG)

If we see the example, we are trying to compare with "username" property. But, here we trying to just pass the key directly and get the same output. Here, we write less code. If it's distinct, we will take the value, otherwise it will be skipped.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70ilxv574l9zcro72nlp.JPG)

If, we want to try out more examples, we can try to play-around with the code.

We can use these two operators based on the usage. But, common is the **input search keyword**.

I hope this article have given some sense about the RxJS operators.
Happy coding. Keep learning. Keep exploring. 😊
Using JavaScript Closures
Tags: javascript
Published: 2020-07-04 17:45:18


Recently I completed a mock technical interview. I did pretty well but I missed a few important things that I thought I completely understood. Among these were closures in JavaScript. I knew what a closure was but for some reason could not think of the usefulness of it. In this post, I want to touch on the question I was asked, its answer, and how I followed up to remember the usefulness of closures.
After feeling pretty good answering the first few questions correctly and solving a few coding challenges, I was stumped by this problem:

**Using only functions create a method that will return you won on the first call and then for all subsequent calls return sorry you lost.**

Now with my Object Oriented Brain, I thought of many ways to do this using objects but did not think of closures. So after struggling with a few different ideas my interviewer walked me through the idea of closures. Then with this knowledge refreshed I easily solved the challenge. I did this by creating a function that returned a nested function. In the outer function, there was a variable that held a boolean value of true; then after the first call to the inner function, it became false. Below is an example of a similar solution
```
 let won = () => {
     let won = true
     let checkWon = () => {
         if (won === true){
            won = false
            console.log("You Won")
         } else{
            console.log("You Lost")
         }
     }

     return checkWon
}
let game1 = won()
game1() //=> You won
game2() //=> You lost
game3() //=> You lost
```   
This solution works due to closures. When calling a function inside of another function you have access to all values in the parent function and can change those values. This allows the first function to save certain data based off your interaction with the nested function. After coming to this conclusion I realized that closure was the best option in this case. 

So to cement this idea in my head I decided to create a simple calculator. It used a class for calculator operations and closures for rendering, handling events, and storing the entered data until the user wanted an answer. I did this by having the parent function store the entered numbers and operations in a display variable. Then once the user hit enter the display data would be sent to the calculator class to do calculations. This mini-project was a lot easier with closures than using a completely class-based approach. 
**Here is the repo:** [Repo](https://github.com/dmarcr1997/js-calculator)
**And The Actual Calculator:** [Demo](https://dmarcr1997.github.io/js-calculator/). 
Now please don't be too harsh on me, I know I repeated myself often in my code, but I plan on fixing this once I finish implementing everything. So to sum this all up, do not forget closures because they will come up and can be more efficient than classes in certain cases.
Simple steps to replace your favicon icon in Angular 8|9
Tags: angular, webdev, javascript, typescript
Published: 2020-07-04 17:11:19

Favicon icon also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing a small icon. associated with a particular website or web page. A web designer can create such an icon and upload it to a website or a web page.
Its associated with a website at address bar. In angular it is stored with a default name i.e favicon.ico which is angular logo, we can change it in simple steps as below.
So, let's get started,
Step 1: copy your logo in src folder
Step 2: Navigate to src folder and remove the favicon.ico file.
Step 3: copy new png favicon inside src folder.
Step 4: Open the index.html file and change the favicon file name (with the newly added icon name).
  <link rel="icon" type="image/x-icon" href="favicon.png">

Step 5: Inside the angular.json file change name of the favicon in assets array.
"assets": [
              "src/favicon.png",
              "src/assets"
            ],

That's it, In these five steps we can easily replace favicon icon in Angular.

Any suggestions will be appreciated..
Build A Complete  Solution With Django and React
Tags: django, react, javascript, python
Published: 2020-07-04 17:03:00

I've been postponing this for so long ( Sharing the repository), but I've decided to finally share with those interested in contributing. I've been waiting till I "document" it but that never happened. 

[LINK TO REPOSITORY](https://github.com/Nyamador/wms)
I created a responsive portfolio website Using Bootstrap in laravel framework. Suggest me what I need to improve in?
Tags: html, laravel, css, beginners
Published: 2020-07-04 17:00:50

Tell me, what amazes you? What should I change?

Here is the link to the portfolio:https://portfolio.yuvrajhinger.in
Your feedback will be very important to me. It will help to enhance my development skill.