teleren/devto huggingface dataset:
Angular Forms and Reactive Forms
Tags: angular, typescript
Published: 2020-10-07 14:35:34


Over the past year, I've come to the conclusion that explicit Angular Form and Reactive Forms coding may almost completely be replaced as follows:

{% link https://dev.to/jwp/angular-ngmodel-model-and-viewmodel-5m %}

**Forms and Reactive Forms**

When we choose these constructs we are saddled with ton's of messy boiler-plate code. As well as implementing two-way binding within our code. 

This indicates a problem with the implementation of these two types of validation coding. We should have known from the start that all this boiler plate work is a bad code smell. What used to work is now, in my mind considered deprecated!

**Try ngModel instead**

We get all the goodness of automatically created form controls using the ngModel as outlined in the article above. No more boiler plate code.

Become familiar with the triad of ngModel way of doing things and it's simple to use. 

- Add a #controlName parameter and assign it a ngModel value

```html
#controlName = "ngModel"

```
- Use two way binding syntax for the ngModel, where propertyName is found in your Typescript code.

```html
[(ngModel)] = 'propertyName'
```
- Hook up a change event handler like this.

```html
(ngModelChange)='propertyName = onPropertyChanged(controlName);
```
- In onPropertyChange return the viewmodel.

```typescript
onPropertyChanged(ngModel){
 // can spin off asynchronous task here
 // the viewModle property is always the proposed change
 return ngModel.viewModel;
}
```
As the article points out Pipes work too, they are the last thing to fire and do not create another round of changes!

Oh yes, the formBuilder and the formControl array concepts are history too. 

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

Caveat: If you need to detect if all of the models are valid, ngModel doesn't provide that. In that case use Forms and Reactive Forms. 

JWP2020 FormControls aren't Dead
Doodle Jump in JavaScript (video)
Tags: tutorial, javascript, gamedev
Published: 2020-10-07 14:24:31

Hello Everyone! As seen recently on freeCodeCamp.org, I made a video on how to make Two Millenial Games in JavaScript, HTML and CSS.

Here is the Doodle Jump game walkthrough from that video. Hope you enjoy it!

If you did like this video, please hit the Like and Subscribe button so I know to make more!

Video Content:
⌨️ (00:00) Introduction
⌨️ (01:54) Introduction to Doodle Jump
⌨️ (01:56) Doodle Jump game logic
⌨️ (03:34) Setting up our game
⌨️ (07:37) Creating our doodler
⌨️ (12:02) Creating our platforms
⌨️ (15:02) Creating our Platform Class
⌨️ (19:53) Moving our platforms
⌨️ (23:12) Making our doodler jump
⌨️ (22:40) Making our doodler fall
⌨️ (27:21) Writing our game over logic
⌨️ (30:54) Hooking up our keyboard keys
⌨️ (38:21) Making our doodler go left and right
⌨️ (44:57) Removing and adding new platforms using array work
⌨️ (48:49) Removing all children of the grid using a while loop
⌨️ (49:41) adding the score

{% youtube YSEsSs3hB6A %} 

YouTube: https://www.youtube.com/aniakubow
Twitter: https://www.twitter.com/ania_kubow 
Instagram: https://www.instagram.com/aniakubow
Github: https://github.com/kubowania/Doodle-Jump
LudumDare47 Timelapse
Tags: javascript, ludumdare, gamedev
Published: 2020-10-07 14:23:59

{% youtube jz3cJprthAU %}

Time-lapse video of the creation of my LudumDare47 jam entry 
Catch the Bugs

^Please play if you want to see the finished game, and rate it^
details in the vid

Realtime - 11hours+

The theme for this gamejam was Stuck in a loop and I built it with Playcanvas across 3 days
I want to find my first paying customer
Tags: startup, customers, marketing, sales
Published: 2020-10-07 14:12:11

---
title: I want to find my first paying customer
published: true
description: It is great to get users to your website, but it doesn't guarantee paying customers. Not even a "successful" launch can. You need to find that first-set of paying customers for your startup
tags: startups, customers, marketing, sales
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ypul9071ddvf27q3c1fl.png
canonical_url: https://2.flexiple.com/no-vc-reports/i-want-to-find-my-first-paying-customer
---
It is great to get users to your website once you have launched your startup, but it doesn't guarantee paying customers.

Not even a "successful" launch can. Finding that first-set of paying customers for your startup is the goal of the seventh No-VC report!

Well, the key is to leverage your personal network. People you know. Individuals who will be more receptive to what you have to say.

With them, you can get actual conversations started. Hence, there is a high chance of converting them to your initial paying customers.

But how do you find the relevant people in your network? In the report share two ways:

1. Starting with your immediate LinkedIn connections

2. Looking at the startups you want to target and then finding people in them

For both these methods, I have given a step-by-step breakdown of how you should go about it. Highly powerful tools like PhantomBuster make the process very automated.

Do read this report: https://2.flexiple.com/no-vc-reports/i-want-to-find-my-first-paying-customer and let me know if you have any questions. Take out 5 mins from your schedule - please :).

If you like the report, do support me on Twitter - your support will really help me :).

{% twitter 1313820587911901184 %}
Build a Carousel with Slick
Tags: tutorial, webdev, html, javascript
Published: 2020-10-07 14:09:56

Are you looking to add a carousel or any sliding? I recently did and now take the time to share it with you. Let's see together how we can do this.

We will go through the steps of implementing Slick scripts and styles in order to integrate a sliding carousel as smoothly as possible.


##Prepare your code
We can download the files by going to [Slick website](https://kenwheeler.github.io/slick/) or [Github](https://github.com/kenwheeler/slick).

You can also point to these CDN links for the CSS and JavaScript sources.
```html
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
```

Now we will need to create our Slick HTML element. It will be the parent to a list of `div` containing the content. The Slick parent will use the slick id and will have a `data-slick` attribute.
```html
<div id="slick" data-slick='{}'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

In this case there will be 6 slides defined by `div` elements. That's where we will add our content (cfr Codepen example).

We need an extra step to make our basic carousel working. In JavaScript we will initiate our Slick element.
```javascript
$("#slick").slick({});
```

We now have a basic, Slick carousel. What if we need to change some settings?


##Opt for our carousel settings
We can work with a [wide range of settings](https://github.com/kenwheeler/slick#settings).
Here are the most useful ones:
- The sliding speed in ms: `speed`
- The number of slides to show: `slidesToShow`
- The number of slides to scroll: `slidesToScroll`
- Whether the carousel slides indefinitely or not: `infinite`
- The responsiveness: `responsive`

Those settings can be defined in the HTML inside the `data-slick` attribute but I would advise to define those inside the JavaScript.
```javascript
$("#slick").slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3
});
```

Our Carousel is now working following our new settings! Let's see how it could look like.

## Live example on Codepen
Isn't an example worth a million words? 😄
{% codepen https://codepen.io/beumsk/pen/abdBmBo %}

A bit heavy since it uses jQuery, Slick is still a really straightforward integration.
Huge thanks to [Ken Wheeler](https://kenwheeler.github.io/slick/)!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and [buy me a coffee](https://www.buymeacoffee.com/beumsk) 😇
System Design 101
Tags: softwareengineering, technology, architecture, programming
Published: 2020-10-07 14:15:58

---
title: System Design 101
published: true
date: 2020-10-07 13:56:59 UTC
tags: softwareengineering, technology, softwarearchitecture, programming

canonical_url: https://towardsdatascience.com/system-design-101-b8f15162ef7c
---

[![](https://cdn-images-1.medium.com/max/2600/0*K3dJOJ5kDYXsGQcD)](https://towardsdatascience.com/system-design-101-b8f15162ef7c?source=rss-577e2119c7f2------2)

Step by step guide on designing a system
System design is one of the most important and feared aspects of software engineering. One of the main reasons was that everybody seems to have a different approach; there is no clear step by step guidelines.

The struggle of software engineers with system design can be divided into two parts:

####1) The system design process is unstructured by nature; there is no proper answer to say binary right or wrong.
####2) Software developers lack in experience developing complex and large-scale systems.

In this article, we’ll go through steps to approach solving a design problem. This guideline may help you to design a system. This one is based on my experience of learning architecture courses.

★Step 1: Requirements clarifications
★Step 2: Estimation of important parts
★Step 3: Data Flow
★Step 4: High-level Component design
★ Step 5: Detailed design
★ Step 6: Identify bottlenecks and resolve them
For detailed information,
[Continue reading on Towards Data Science »](https://towardsdatascience.com/system-design-101-b8f15162ef7c?source=rss-577e2119c7f2------2)

Those who don't have medium account may use [ this link](https://towardsdatascience.com/system-design-101-b8f15162ef7c?source=friends_link&sk=be3d26de1f9d1671b4abe379aae814f8)
Launching Happydia
Tags: productivity, extension, browser, socialmedia
Published: 2020-10-07 13:54:54

Do you find your social media feeds are overcrowded with depressing stories, politics and negativity? 

A [new study](https://guilfordjournals.com/doi/10.1521/jscp.2018.37.10.751) concludes that there is in fact a causal link between the use of social media and negative effects on well-being, primarily depression and loneliness. 

Being on (Facebook / Twitter / Youtube) makes me stressed.
So, I decided to build a browser extension called "Happydia"

Happydia (Happy-Social-Media) is a browser extension that helps you out by cleaning up sad, triggering, and annoying news from your social media feeds.

![](https://raw.githubusercontent.com/Ademking/happydia/main/demo.gif)

## How to install:

* [Product hunt](https://www.producthunt.com/posts/happydia)
* Google Chrome: [Click here](https://chrome.google.com/webstore/detail/happydia/eppbnnfjppbiockeliifocniohcpnhlm)
* Firefox: [Click here](https://addons.mozilla.org/en-US/firefox/addon/happydia/)
* Microsoft Edge [Click here](https://microsoftedge.microsoft.com/addons/detail/happydia/knfbnfckkfmfipijgajpefpcimkfideb)

__Q: How does this browser extension works?__

__A:__ While your webpage is loading, Happydia looks at the site and compares them against a list of banned words ( Sad / Politics / Depressing ... ) it was built to block. If it finds any, it blocks them.


__Q: Where do the blocking and hiding filters come from?__

__A:__ Happydia, like all ad blockers, relies on filter rules to know what to block and hide on the web pages you visit. You can check the list of filtred words in our Github repository. (Inside "data/" folder)


 __Q: I sometimes want Happydia to be disabled. How can I do this most easily?__

__A:__ You can click the Happydia icon in the toolbar to bring up the menu. There you have the option to disable/reenable Happydia by simply clicking the related slider and then refresh the page.
CSS Visual Cheatsheet
Tags: css, csscheatsheet, cssvisualcheatsheet
Published: 2020-10-07 13:46:12

---
title: CSS Visual Cheatsheet
published: true
description: Attempting to make a visual CSS mega cheatsheet with all the most common layout patterns we see everyday and their conceptual CSS implementations
tags: css, csscheatsheet, cssvisualcheatsheet
cover_image: https://gitlab.com/gk3000/css_cheatsheet/-/raw/master/pics/coverimage.png
---

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout. 

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them. 

In the end any layout could and should be split into parts/blocks and we see every block separately. 

Here is our first take on that and we would be happy to keep extending it to help us all. Please, send you suggestions in the comments here or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be. 

GitLab page: https://gk3000.gitlab.io/css_cheatsheet/

Repo url: https://gitlab.com/gk3000/css_cheatsheet
Made a blog on software contracting/freelancing
Tags: career
Published: 2020-10-07 13:40:56

Hey! 👋 Just wanted to share a blog ([contracto.dev](https://contracto.dev)) I made to describe my experiences as a software contractor. I usually take on jobs like React.js, Node.js, Serverless and more.

If you're curious about software contracting, its challenges and benefits, I've written a couple of posts on it:

1. [Is contracting for me?](https://contracto.dev/what-is-software-contracting)
2. [How to get started](https://contracto.dev/how-to-get-started)

Let me know if you have any Qs!
Marketplace Website: What you should know?
Tags: webdev, development, ecommerce, marketplace
Published: 2020-10-07 13:21:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73pm5i03wjhw5f8mx74a.jpg)

We are all living in the digital era, when businesses can really benefit from online presence. There are different eCommerce websites and the **marketplace** is one of them. It is the specific website type, where online shoppers can look through offers from various retailers. The marketplace serves as a bridge between buyers and sellers. Why such websites become more and more popular? The answer is its benefits for both online shoppers and retailers. The customers can choose from a variety of offers from different retailers, while retailers can easily place products in one place without marketing expenses.
     
There are also different **types of marketplace websites**:

* Marketplace for products
* Services marketplace
* Media marketplace
* Marketplace for crowdfunding

####What about the essential website features to consider in Marketplace Development? 

Check our shortlist below:
1. *User account* - remember that a customer account should differ from the account for sellers.
2. *Messages option* - a marketplace should ensure smooth customer-seller communication 
3. *Wish list and Booking option* - it is beneficial for all users. Sellers can make effectively plan sales and customers feel more comfortable.  
4. *Payment gateway* - take care of providing users with reliable payment solutions and options.
5. *Catalog of products* - ensure to include filters, search, category etc. to satisfy the customers with comfort and convenient search process.
6. *Reviews* - offer your customers the opportunity to share their experience.     

The article about [Marketplace Website Development](https://dinarys.com/blog/how-to-build-a-marketplace-website) will tell you more about how much does it cost to develop such a website, what are the steps of the development and how to build a marketplace on Magento.

Hope you’ll enjoy the reading!
Paradise
Published: 2020-10-07 13:39:27

IT Paradise is what we make of it, not necessarily what it is.

- We mostly love what we are doing.
- We learn how to deal with challenging situations.
- We learn how to learn from our failures.
- We learn how to navigate the terrain.
- We learn about schedules.
- We learn about disappointments.
- We get to experience victories.
- We never totally "get there" and that's ok.

Most of all, after it's all said and done; we will remember those we worked with, not what we worked on.  We'll have fond memories and laugh at times gone by.  The good ole' days are happening now. 

JWP2020
Should I learn Java?
Tags: watercooler, help, java, webassembly
Published: 2020-10-07 13:39:22

Yes it's another one of those posts.

I am at a crossroads, I want to call myself full stack in the enterprise world so that the roles that I frequently land can benifits from a language that they actually use.

I know some cpp and rust but I've never seen any of this used in companies that I have worked for in the enterprise space, where tried and true is king.

So one of the ways I could learn Java in a scoped way would be through web assembly. I think that's an area of Java that is a little neiche but intersts me.

I know you can't answer for me but I like to write down my thoughts.
Top 9 Benefits of AWS Services
Tags: aws, webdev
Published: 2020-10-07 13:20:24



AWS cloud technology offers many advantages to the companies at present. Some of the key advantages are the simplicity of usage and retention of the IT infrastructure as well as the optimization of operating costs by pay peruse. With top-notch security settings and networks, AWS guarantees the confidentiality and consistency of business data.

AWS offers out-of-the-box features for scalability and resource backup. It offers the resource and software-monitoring platform referred to as AWS Cloud Watch. AWS web services offer instances of computation such as EC2 that can be provided with various operating systems like Windows as well as Linux. Besides, AWS comes with its service known as AWS Lambda providing server-less computing advantages.

 
Top 9 Benefits of using AWS Services

Different types of features are provided by Amazon Web services which help to make it different from the remaining companies.

 
1. Mobile friendly accessibility
 
2. Simple to use

3. Protected

4. Storage
Different storage are provided by Amazon which is as follows:

    Amazon Elastic Block Store – Block level storage which is possible to use together with the EC2 instances for keeping the information persistent.

    Amazon Glacier – Primarily used for long-term storage information that is not used regularly is stored. Put simply, storage for archive and data backup.

    Amazon Simple Storage Service – This helps to provide storage utilizing a web-based interface.

    Amazon Elastic File System – This particular storage is employed for applications and workloads which are present in AWS public cloud

5. Pay per use

6. Multi-region backups

7. Scalability and reliability

8. Innovation

9. Global leader

Learn more here: https://www.rlogical.com/blog/top-9-benefits-of-aws-services/
Experts warn of a new spy app on Android devices
Published: 2020-10-07 13:15:36

Despite the high degree of protection that the Android system provides to its users, it is natural that there are some security vulnerabilities that may lead to penetration of users' privacy and access to many important data.

 

Where researchers from the company "ESET" for electronic security warned of the emergence of a new "Spyware" program capable of recording phone calls, accessing the camera, reading some messages and deleting files.

 

As this spy program is known as “Android / Spy-C23.A” and the process of connecting it to the target phones is done through fake applications that are downloaded from fake stores. According to the British newspaper, “Mirror” these applications deceive users by disguising themselves in the form of well-known applications such as “Telegram”, “threema” and “AndroidUpdate”, in order to successfully hack devices.

 

The "APT-C-23" group, which created this spying program, specifically targeting the Middle East region, was famous for creating many spy applications starting in 2017 targeting Android devices and some Windows applications.

 

On the other hand, "Lucas Stavenko", who works as a researcher at the "ESET" company, said that experts had discovered a fake app store that spread such malicious programs, and urged Android phone users to download applications from the official Google Play Store only.
Network ACL vs Security Groups
Tags: aws, architecture, cloud, security
Published: 2020-10-07 13:15:04

|Network ACL									|Security Group
|:----------------------------------------------|:----------------------------------------------
|At subnet level 								|At instance  level
|First level for ingress						|1st level for egress
|This can have both allow and deny rules	    |This can have only allow rules
|Ordered rules ( processed in a order)			|not ordered
|default - allow all and deny all in that order	|default deny all in bound, allow all outbound
|stateless(rule should be applied both ingress & egrees)	|stateful (applied automatically)
How do I create a desktop app that easily allow plugins?
Tags: help, desktop, javascript, deno
Published: 2020-10-07 13:06:44

Of course, the desktop app will be open sourced; but I don't want people to have to recompile, just to easily write a plugin.

An idea of mine is to use Deno (~15 MB) or NW.js (~100 MB) (and not sure about Electron), so that it can easily pick up the JavaScript code in a selected directory, and run on the fly, without compiling.

Python would be another idea, but I am not exactly sure how to...

Is there a better idea?
AzureFunBytes New Episode Reminder - 10/8/2020 2 PM EDT -  @Azure Artificial Intellegence w/ @WirelessLife
Tags: azure, ai, tutorial, beginners
Published: 2020-10-07 12:58:08

New #AzureFunBytes - 10/8/2020 2 PM 

With AI, we can build solutions that seemed like science fiction a short time ago; enabling incredible advances in health care, financial management, environmental protection, and other areas to make a better world for everyone.

This week, Microsoft Sr. Cloud Advocate [Anthony Bartolo](https://twitter.com/WirelessLife) joins me to discuss Azure AI services.  We'll learn how AI empowers applications and users with Anthony, find some cool things to demo, and talk with you!

{% youtube H24rp4kSlaM %}

AzureFunBytes! - Byte-sized content with a live Twitch show!

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions, and learn about Azure!

[Microsoft Learn: Azure Fundamentals](https://docs.microsoft.com/en-us/learn/paths/azure-fundamentals/?WT.mc_id=blog-devto-jagord)
[ITOps Talk Blog](https://cda.ms/1Lk)
[Microsoft Azure: $200 Free Credit](https://azure.microsoft.com/en-us/free/?WT.mc_id=devto-blog-jagord)

Microsoft Learn: [Get started with AI on Azure](https://cda.ms/1Lj)
[Azure Cognitive Services](https://cda.ms/1Lm)
[Azure Cognitive Services Documentation](https://cda.ms/1Ln)
[Cognitive Services and machine learning](https://cda.ms/1Lp)
Hardcore Year - building SaaS from $0 to $100,000 ARR
Tags: startup, saas, showdev, sideprojects
Published: 2020-10-07 12:48:20

Recently I decided to try a Hardcore Year challenge. Quick explanation: it is a challenge for startup founders aiming to reach $100K ARR (Annual Recurring Revenue) within one year. To make things easier, around $8.3K per month of recurring revenue.

So, the game is on. And now I'm scratching my head trying to figure out how to reach this goal. I have two funnels working, so so, to be honest, and only 12 months to deliver. 

I will be posting regular updates on Youtube and Instagram. If you would like to support me in any way, please visit [video](https://youtu.be/wWHkC_txRVE) and leave a comment that you are from DEV. Subs will be also highly appreciated.