teleren/devto huggingface dataset:
Observer Pattern example in Javascript
Tags: javascript, observerpattern, designpattern, oojs
Published: 2019-09-30 07:13:10

This is an example of observer pattern in Javascript with the example of weather updates. Kindly wrap this function in 
(function(window) {IFFE})(window);



	var weatherForcast = {

			/* observer is a list of subscribers.*/
		observers: [],
		
			/*weatherChange function will have updated weather*/
		weatherChange: function (weather) {
			for (var i = 0; i < this.observers.length; i++) {
					this.observers[i].updateUI(weather);
			}
		},

		/* subscribe function will add a subscriber in observer's list.*/
		subscribe: function (widget) {
			this.observers.push(widget);
			var self=this;
			return function(){
					self.observers.splice(self.observers.indexOf(widget), 1);
			};
		},

		/* Unsubscribe function will remove a subscriber from observer's list.*/
		unsubscribe: function(){
			this.observers.splice(this.observers.indexOf(Widget), 1)
		}
	};
	
	/* Constructor function for Widget(Subscribers).*/
	function Widget(name){
		this.name = name;
	}

	/* function to update all the Subscribers when weather change.*/
	Widget.prototype.updateUI = function(weather){
		console.log('Weather in ' + this.name + ' is ' + weather + '\xB0C');
	};

	/* Creating widgets using constructor function*/
	var x1 = new Widget('New Delhi');
	var x2 = new Widget('Gurgaon');
	var x3 = new Widget('Faridabad');

	/* Subscribing for weather updates*/
	var unsubx1 = weatherForcast.subscribe(x1);
	var unsubx2 = weatherForcast.subscribe(x2);
	var unsubx3 = weatherForcast.subscribe(x3);

	/* weather updated */
	weatherForcast.weatherChange(10);

	console.log('========================');
	
		/* unsubscribing one widget */
	unsubx3();
		
	/* weather updated */
	weatherForcast.weatherChange(11);
Getting away with Hactoberfest
Tags: hacktoberfest
Published: 2019-09-30 07:02:36

---
title: Getting away with Hactoberfest
published: true
description: 
tags: hacktoberfest
cover_image: https://hacktoberfest.digitalocean.com/assets/logo-hf19-header-8245176fe235ab5d942c7580778a914110fa06a23c3d55bf40e2d061809d8785.svg
---

As hacktoberfest is near, I was too bored to search around some great projects to contribute. So I thought I will contribute to of my projects in typescript. I will be adding some more cool features in the module so any extra hands on the deck is highly appreciated. Feel free to fork and tweak around

{% github rubiin/nestjs-easyconfig %}
My Favorite Python Feature: List Comprehensions
Tags: python, tutorial
Published: 2019-09-30 06:46:31

As someone playing around in the YouTube space, I decided to make a video which explains the following code snippet:

```python
[item for item in range(1, 101)]
```

If you're not sure what you're looking at, that's fine! In short, it's a list comprehension that generates a list containing all integers from 1 to 100 (excluding 101). If you'd like to learn more about this syntax, check out the following video:

{% youtube AEG8D4h7kls %}

Alternatively, you're welcome to [check out the article which inspired the video](https://therenegadecoder.com/code/how-to-write-a-list-comprehension-in-python/).  In either case, thanks for checking out my work!
How to do Store survey in Purpletree Customer Survey Extension for Opencart
Tags: opencartrewardpoints, surveyextension, customersurveyplugin, opencartsurveyextension
Published: 2019-09-30 06:31:35

The Opencart survey extension enables you to setup survey questions for visitors to your store. 
 There are many criteria for the selection of the survey audience. You can take the survey audience vote in the form of the option. You can see the survey result in a form of survey chart and survey report. You can use Purpletree Store Survey extension for knowing your Opencart store service feedback and product quality.

How Purpletree Store Survey work
First of all, you can install Purpletree Store Survey extension with the help of the user guide. In user guide Installation process explains step by step, definitely user guide is helpful for the installation process.

After success full install you can see Purpletree customer survey plugin option show in the left side navigation menu. Click on it you can see two option Survey details and Survey Report. In survey details, you can add a question for the survey and In Survey report you can see survey result in form of chart and report.

How to add Question for Survey
Click on Purpletree Survey in the left side Navigation menu and select Survey details and click on it. You will reach on the Surveys page.


For add Question for survey click on add button. You will reach on Add Question from the page. Here you can enter your question and question answers in the form of option and choose question status. After that, click on the save button top right corner. Thereafter, you will reach the Question list page.


To edit a question, click on the action button in front of the question (to be edited). Here you can edit the question, add a new option, edit option and you can delete option and also you can change the question status.


How to view Survey result
Click on Purpletree Survey in the left side Navigation menu and select Survey Report and click on it. You will reach on Survey Report. For show result in form of chart click on Survey Chart tab.


For show result in the form of the report click on Survey Report tab


How to set Survey
You can add/remove the right column by adding/removing the path ‘extension/survey/survey’ from account layout. Go to ‘Design->Layouts’ edit account layout, add a new root and enter the path ‘extension/survey/survey’ and save the layout. To remove, just remove the path from the layout.

Survey page look like this on the customer side


Get this extension at: https://www.purpletreesoftware.com/opencart-customer-store-survey.html
Angular Unit testing Services and how to mock them
Tags: angular, unit, testing, mockservice
Published: 2019-09-30 06:27:27


https://pixel-tones.com/angular-unit-testing-with-services-and-how-to-mock-em/

In this post I take you through my learnings on how to unit test services, this section only caters for the Get services. I will be making a post soon on what would be the unit test criteria for POST and PUT services.

I'm a newbie so i'm open to feedback and just want to share what I have learned.
Anatomy of REST API
Tags: api, programming, architecture, design
Published: 2019-09-30 06:09:31

**What is REST**
*REST (Representational State Transfer) is an architectural style for designing network applications, driven by a set of constraints and inspired from the architecture of the Web.*

**REST and HTTP**
*In theory, REST is entirely separate from the HTTP protocol, but in practice, we're primarily building APIs on top of HTTP. So the goal is to leverage the full semantics of the protocol and use it as an application protocol.*

## REST Constraints:
**Constraint 1 - Client-Server**
*This fundamental constraint enforces a separation of concerns and enables independent evolution of the Client and the Server.*

**Constraint 2 - Stateless**
*The communication between Client and Server must be stateless between requests.
First - the obvious part: each request from a client should contain all the necessary information for the service to complete the request.
Then, the more non-obvious part: all session state data should then be returned to the client at the end of each request.*


**Constraint 3 - Cache**
*All responses from the Server should be explicitly labeled as cacheable or non-cacheable.
Requests should pass through a Cache Component - which can partially or fully eliminate some interactions with the Server.
The results are improved efficiency and scalability by matching and utilizing the already available huge infrastructure of the Web.*


**Constraint 4 - Interface / Uniform Contract**
*The Service and all Clients must share a single uniform technical interface.
In order for that interface to be reusable by a wide range of Clients, it needs to provide generic, high-level capabilities that are abstract enough to accommodate a broad range of interactions.*


**Constraint 5 - Layered System**
*This constraint builds on Client-Server Constraint to allow for Intermediaries / Middleware.
These intermediaries must be fully transparent for the Client.
The interaction between a Service and a Client should be consistent, regardless if the Client is communicating directly with the ultimate receiver of a message or not. Similarly, the Service does not need to be aware of whether the Client is itself acting as a service for other Clients or if it's the actual origin.
This kind of information hiding greatly simplifies the distributed architecture of the system and allows individual architectural layers to be deployed and evolved independently of specific services and consumers.*

## REST Terminologies:
**Terminology 1 - Resource**
*The Resource is the key abstraction of information in REST.
Any information that can be named / identified via a unique, global id (the URI) - is a Resource.*


**Terminology 2 - Representation**
*Any given Resource can have multiple Representations; these capture the current state of the Resource in a specific format.
At the lowest level, the Representation is "a sequence of bytes, plus representation metadata to describe these bytes".*


**Terminology 3 - Hypermedia Types**
*There are several Hypermedia types we can use for our Representations, and we can build our own if we need to.*
How to do Amazon Product Photography in 2019?
Tags: productphotography, ecommerce, sellingonamazon
Published: 2019-09-30 05:51:20

---
title: How to do Amazon Product Photography in 2019?
published: True
description: Proudct Photography isn’t as simple as pointing and caputuring, checkout this guide to master amazon product photography, Useful tips and guidelines explained
tags: product photography, ecommerce, selling on amazon
---
Proudct Photography isn’t as simple as pointing and caputuring, checkout this guide to master amazon product photography, Useful tips and guidelines explained
- What Is Amazon Product Photography?
- How Does Photography Increases ROI?
- Amazon Product Photography Tips
- How To Take Product Pictures For Amazon?
- Amazon Product Image Requirements
- How To Add Photos To Amazon Product Listing?
- Amazon Image Aspect Ratio
- Amazon Product Image Optimization
- Guidelines to follow While Doing Product Photography
To know answers for this following questions visit this blog about proper way of doing <a href="https://www.sellerapp.com/blog/amazon-product-photography/">amazon product photography</a>
Storing DockerHub Credentials using Pass on Ubuntu 18.04
Tags: docker, dockerhub
Published: 2019-09-30 05:43:59

I wanted to pull a Docker image from DockerHub. To do so, I first created a DockerHub account. Once that was done I could run:
```bash
docker login # Enter your credentials
```

By default, however, it stored my login credentials unencrypted.

To store my credentials securely, Docker supports interfacing with a password manager. 

For Linux, Docker supports [Pass](https://www.passwordstore.org/). I initialised Pass to use git as its storage. I didn't have to initialise Pass to store passwords in a git repo though. But I think it is a good idea if you need to share secrets among team members. 

To use Pass, I first needed to create a [GPG](https://gnupg.org/) key pair. This will ensure I can sign my work and allows others to verify the authenticity of work that is signed by me. 
```bash
$ sudo apt install pass   # Install Pass
$ gpg --full-generate-key # Create public-private key
$ pass git init <public key>
```
To bridge between Docker and Pass, I needed to use [docker-credential-pass](https://github.com/docker/docker-credential-helpers). Now I am less than impressed that docker-credential-pass doesn't come with a GPG signature. I am really surprised no one has kicked up a fuss about that. Perhaps there is a way to verify the download but I can't work it out.
```bash
$ mkdir ~/bin; cd ~/bin
$ echo 'export PATH=$PATH:~/bin' >> ~/.bashrc
$ wget https://github.com/docker/docker-credential-helpers/releases/download/v0.6.3/docker-credential-pass-v0.6.3-amd64.tar.gz
$ tar xvzf docker-credential-pass-v0.6.3-amd64.tar.gz
$ chmod a+x docker-credential-pass
$ mkdir ~/.docker
$ echo '{ "credsStore": "pass" }' > ~/.docker/config.json
$ pass insert docker-credential-helpers/docker-pass-initialized-check
$ # Set the password to: pass is initialized
$ docker login # Which will now store credentials in Pass
$ docker pull ubuntu:18.04
```
The end.
Thank you all for the love
Tags: laravel, php, watercooler, thankyou
Published: 2019-09-30 05:31:15

---
title: Thank you all for the love
published: true
description: Thank you all for the love
tags: laravel, php, watercooler, thankyou
cover_image: https://thepracticaldev.s3.amazonaws.com/i/29e7qcsokhw5tumy6doz.png
---
Thanks a lot, everyone for 10K+ view.

Thanks a lot. It means to me very much. Please keep sharing your love. It helps a lot of us get going. 

Thanks again, and keep reading.
How to setup automatic db backup in Laravel
Tags: php, laravel, tutorial, database
Published: 2019-09-30 05:26:00

### Introduction
Hi All, this is Adi again with a Laravel related article. This time in a shorter format. As Laravel developers we need a way to back up our app’s databases somewhere for both save keeping the data and for analysis. I want to share with you a simple solution that I have devised for some of my smaller projects. I have tested this method only on MySql DB and on a VPS, but I think it’s pretty much the same for any database.

### TLDR;
The outline of my solution is as follows. There’s an artisan command which handles the backup, that runs periodically using a cron. This command makes use of the `mysqldump` tool that comes with all MySql installations. `mysqldump` dumps the given DB into a `.sql` and we can control where it is dumped. And that’s how my solution works. Now let's see some code.

### The Code
First off create an Artisan command like so `php artisan make:command BackupDatabase`. This should create a class with the name you mentioned in the command and should also have some default scaffolding for the command.

![DB Backup command](https://i.imgur.com/BvZlkY7.png)

Let me explain what the above code does. Within the constructor we prepare the name of the file (line 20), then we check if there's a folder named `backups` within the storage folder, if not we create it (line 21). Then we instantiate a process, with the command that we want to be executed, we also pass it other details (line 23-29).

Then in the handle method runs the process and logs the output to the application logs. This handle method is executed after the constructor by Laravel itself, so you don't have to invoke it from anywhere.

And finally you need to setup cron, you have 2 options here, either you can call Laravel's `schedule:run` command or call your backup command directly.

### Conclusion
This is a pretty simple and neat solution for backing up your most valuable asset, that's the data. You can extend this feature to do more, like attach the .sql file to an email or upload it to dropbox or where ever and so on.

That's all from me, it's been Adi - more about me at [Simplest Web](https://simplestweb.in/?utm_campaign=laravel-backup-article).

**Related resources**

 - [https://laravel.com/docs/5.8/artisan](https://laravel.com/docs/5.8/artisan)
 - [https://laravel.com/docs/5.8/scheduling](https://laravel.com/docs/5.8/scheduling)
.Net Core 3.0 near to real world ;)
Tags: dotnet, 30, netcore, linux
Published: 2019-09-30 04:17:09

---
title: .Net Core 3.0 near to real world ;)
published: true
description: .Net core opening Windows to real world 
tags: dotnet, 3.0, .net core , linux
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lrvxhef0093fq6uh2eqd.jpg)

The past 4th septembre, Microsoft released dotnet 3.0, this is most stable 
 version(Microsoft expectancy to world developers),  with It Microsoft show their interest into participated actively in real world development environment with their C# (v 8.0), obviousely all this is a nice dream ( for their and their development community), and It's a result to a great and strong work, Microsoft with .Net Core, ASP and Xamarin show us their interest in became in a main tool to real world developers, now with Dotnet Core 3.0 her compatibility with others operative systems as Linux (mainly) and Mac OS, close the existent gap around of developer world.

At this point is necessary remember that the top of OS use in Azure after Microsoft integrate Linux in their platform is Linux OS in differente flavours, with the arraived of Dotnet Core open the opportunities to C# community and potentializes It, this time at difference when Microsoft launched Windows Mobile and their OS, at these moment this iniciative was a great mistake for Microsoft and their community.

Although Microsoft isn't my preferer development environment, this time I think that this is the best success of Microsoft to the next years, open the possibilities to the community is the smarter decition for this company.

dotnet build 
dotnet run 
dotnet publish

Is a nice cli interface, but as all, always exist some to improve, the management of final product is some confused, the management of different versions or integration of severals architectures, and the compatiblity with 64 bits libraries. Other point less is the visual studio requirements and size of updates.

As a plus point the documentation at site is grow, their structure is nice and this is oriented to practical and quick exercises to ease to curve learn, making interactive the learning.

This references can help you to learn .Net Core:

https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/intro

https://www.youtube.com/watch?list=PLdo4fOcmZ0oWoazjhXQzBKMrFuArxpW80&v=eIHKZfgddLM

Dowload center:

https://dotnet.microsoft.com/download


* Remember update Visual Studio to use Dotnet core 3.0
* Remember you only can use Dotnet 3.0 with Visual Studio 2019
Responsive Content Filter JavaScript
Tags: css, javascript, webdev
Published: 2019-09-30 04:05:34

This code sample shows how to create a responsive list filter using plain JavaScript (no jQuery). JavaScript gets the breakpoint value from a hidden css pseudo element that uses a media query to set its value. Therefore, it is not necessary to maintain rendundant responsive breakpoint values in the script.

All of the code is available to [edit and demo](https://jimfrenette.com/code-editors/sandbox/responsive-filter-js "demo and edit this code in our online sandbox") in our online sandbox.

#### [Demo](https://jimfrenette.com/code-editors/sandbox/responsive-filter-js "demo and edit this code in our online sandbox")

##### [jQuery version](https://jimfrenette.com/javascript/responsive-filter)
How to create desktop apps with Flutter
Tags: windows, javascript, dart
Published: 2019-09-30 03:27:17

---
title: How to create desktop apps with Flutter
published: true
description: We look into how to run Flutter on Linux and Windows. What is the current status and what can you achieve if you want to try it out.
tags: windows, Linux, JavaScript, dart
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lmk4eeaj0gqy2u5eqxgl.jpg
---

{% youtube cMK6qxmTdaM %}
How much do you trust your toolchain and why?
Tags: codequality, safety
Published: 2019-09-30 03:12:31

Whether you use a compiled or interpreted language or something in-between, how do you know your compiler/interpreter faithfully and correctly implements the language?

How much undefined or vendor/processor-dependent behavior is in your language specification? Meaning, how complete is your language's specification?

Do you evaluate your toolchain for completeness and correctness? Moreso than just having a list of open issues, how much can you trust that the language you use is consistently implementable?

Is this the first time you've ever thought about how much you can trust your toolchain?
🚀6 Must Have VSCode Extensions 🔥 — 2020 list!
Tags: vscode, productivity, extensions
Published: 2019-09-30 02:31:28

There are tens of thousands of extensions in the Visual Studio Marketplace. Some good, some bad, and when you’re adding untrusted 3rd party code to your development workflow, less is more.

I’ve spent countless hours the last few weeks scouring the internet for the most interesting and useful Visual Studio Code extensions to maximize our time spent developing!

**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)**
Launch a local development server within vscode with live reload feature for static & dynamic web pages. No need to switch between external terminals or applications to launch a quick development server. Less context switching to manage infrastructure gives us more mental focus for what matters, code!


**[Browser Preview](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)**
A real browser inside vscode that you can debug! Keep that focus within your development environment! Load up a real chrome tab in vscode instead of having to switch to another application. Don’t lose focus on your code!


**[Instant Markdown](https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-instant-markdown)**
Simply, edit markdown documents in vscode and instantly preview it in a browser, extra points if you combine it with Browser Preview. Great for DEV.to posts! Edit, save, and hot reload!

**[Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)**
This is one of the coolest extensions I’ve come across, it will interactively generate types and (de-)serialization code from JSON. No more need to copy, paste and reformat backend and frontend objects anymore. This takes care of the heavy lifting for us.


**[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)**
REST Client allows you to send HTTP request and view the response in vscode directly. Send/Cancel/Rerun HTTP requests in editor and view response in a separate pane with syntax highlighting.


**[Surround](https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround)**
A simple extension to add wrapper templates around your code blocks. Easily add conditionals, error handling, or any custom code block that fits what you need. Surround is a powerful tool that will definitely speed up your development process.

---
If you enjoyed this post let me know! 💛🦄🔖