teleren/devto huggingface dataset:
Reading Serialized PHP
Tags: php
Published: 2020-09-10 19:36:20

Serializing data is simply converting a value into a string. Imagine you had an array in PHP that you wanted to serialize, it would look something like the following...

```php
$arr = [
    'one' => 'val',
    'two' => 'val',
];

$serializedArray = serialize($arr);

/** 
echo $serializedArray;

output:
"a:2:{s:3:"one";s:3:"val";s:3:"two";s:3:"val";}"
**/
```

Let's dissect it.

- `a:2` - The proceeding value is an array of length `2`
- `s:3` - This item is a string of length `3` with a value of `val`
- `s:3` - This item is also a string of length 3 and value of `val`

You can imagine how different data types are represented in this fashion.

- `string` - `s:length:value`
- `int` - `i:value`
- `bool` - `b:value`
- `array` - `a:size:{key definition;value definition;}`
- `object` - `O:strlen(class name):object name:object size:{s:length:property name:property definition;(repeated per property)}`

Pretty easy to understand once you know the format.

---

Resources:
- [Serialize - PHP Docs](https://www.php.net/manual/en/function.serialize.php)
Controlling Angular Display Properties in HTML
Published: 2020-09-10 19:35:13

```html
<div  
   [style.display]=
     "person.id === -1 ? 'grid' : 'none'">
      First Save New Person, 
      then proceed.
</div>

```

Similar to the [ngclass] attribute; here we deal directly with the display style instead.  

If the new person (id = -1) is shown then this message is displayed. Otherwise when person.id is other than -1 the display is set to none!  This allows the remaining page to be rendered because, this element renders with a width of 500em pushing everything off the page. Probably not good practice but works.

Works like a charm!
I have developed an easy to use Lint visualizer for Angular projects!
Tags: angular, javascript, node, hacktoberfest
Published: 2020-09-10 19:19:57

[GitHub](https://github.com/ChandrahassTvs/lint-visualizer) | [NPM Registry](https://www.npmjs.com/package/lint-visualizer)

I have been looking for an opportunity to work on an open-source project, giving back to the open-source community which has helped me a lot in my career.

While looking for different ways to contribute, I have personally faced some inconvenience in tracking my project's lint errors/warning as I keep fixing them and this has pushed me to build a simple tool that will help the developers like me to visualize the lint errors/warnings as actionable items.


**So what is Lint Visualizer?**

Lint Visualizer provides a smart way to view your project's lint errors & warnings as actionable items.

It's time to say BYE BYE to the old-school terminal-based output for your lint errors/warnings. With the all-new **Lint Visualizer**, you will now have a clear way to visualize your lint errors/warnings and keep track of them as they are being fixed. It comes with a couple of handy features that help you to clearly work on the errors/warnings and easily launch google search for the fix.


**My learnings during this contribution**

This contribution has thought me a lot of things like creating CLI commands, working with chile_processes in the node.js (spawn() vs exec()), writing a clear Readme file, publishing packages to NPM registry, managing releases in GitHub, and so on.


**Challenges faced**

I have initially faced issues with **maxBuffer** size exceeded as the ng lint output is so much that the `exec()` child_process in the node.js was not able to handle. Researching on the issue, I have understood that we should use `spawn()` over `exec()` for complex processes that give larger outputs and how to consume the output in chunks.

`ng lint --format=json` vs `ng lint --format=checkstyle` => I faced issues with `spawn()` initially since it was also not able to stream all the output and finally found that `ng lint --format=json` was not streaming the output like the `ng lint --format=checkstyle`


**Reference links that helped me in publishing my first NPM package**

[https://developer.okta.com/blog/2019/06/18/command-line-app-with-nodejs](https://developer.okta.com/blog/2019/06/18/command-line-app-with-nodejs)

[https://nodejs.org/api/child_process.html](https://nodejs.org/api/child_process.html)

[https://stackoverflow.com/questions/32886789/change-the-code-from-child-process-exec-to-spawn](https://stackoverflow.com/questions/32886789/change-the-code-from-child-process-exec-to-spawn)

[https://stackoverflow.com/a/36562121/12255873](https://stackoverflow.com/a/36562121/12255873)
What is Micro Frontends?
Tags: microservices, webdev, sideprojects
Published: 2020-09-10 19:15:12

## What is Front End?
A frontend is a software or program that interacts with the application user and delivers the contents and experience based on various logics.

For any software or application requires a kind of frontend to interact with the business logic and easy to use.

These applications can be bundled and can be served as a monolithic (single) application for the users.

Let's move on to the topic:

## What is Micro Front End?

A micro frontend is an approach of splitting the whole frontend application into loosely coupled "micro apps" which is similar to microservices in the backend.

The main advantage of using micro-frontends is,

* Easy to manage
* Teams with different frontend technologies can work seamlessly.
* It can communicate to any microservice backend with a different database.
* Scale specific micro app based on the need.

These micro apps can communicate with each other by custom events and we can also dynamically inject any micro app into others.

## What Else?

The deployment of these micro apps may be a little harder and the continuous deployment process should be taken care of.

Testing individual applications make things harder.

Creating micro-frontends should be done based on the necessity of the application and not because of your team knows various technologies.

Thanks. Comment your thoughts below.

Twitter - https://twitter.com/sasiKdharan
AzureFunBytes Episode 14 - DevOps on @Azure Part II w/ @StevenMurawski
Published: 2020-09-10 19:13:14

Back again, it's Steven Murawski! We're back to discuss DevOps and more! Steve will help us learn more about DevOps, discuss some cost savings, and even more.

We'll take questions, find out what Steve's working on, and more!

{% youtube K_5Dj8eLYJk %}

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://cda.ms/1jV)
[Microsoft Azure: $200 Free Credit](https://cda.ms/1tj) 
[DevOps at Microsoft](https://cda.ms/1B2) 
[What is Azure Pipelines?](https://cda.ms/1zZ) 
[What is Azure Repos?](https://cda.ms/1B0) 
[What is Azure Boards?](https://cda.ms/1B1)
[Azure DevOps Documentation](https://cda.ms/1zY)
[Top Stories from the Microsoft DevOps Community – 2020.09.04
](https://cda.ms/1Ch)
Developing with Empathy: Reusability
Tags: javascript, webdev
Published: 2020-09-10 19:01:02

"Reusability", "Reusable Components"... we've all heard it before.

In my [last post](https://dev.to/clairebaire/developing-with-empathy-single-responsibility-359), I spoke about the Single Responsibility Principle. Now, if we take this idea and apply it to "reusable components" or "reusability" it makes total sense. But aside from reusable components, what other ways can we make our code more modular and reusable?

Let's put it in the context of the code below:

*index.html*
```
<script src="date.js" type="text/javascript"></script>
<form>
	<input type="date" id="date1" name="date1">
	<input type='date" id="date2" name="date2">
	<button>Submit</button>
</form>
```

*date.js*
```
document.addEventListener('submit', () => {
	let date1 = document.getElementById('date1').valueAsDate
	let date2 = document.getElementById('date2').valueAsDate

	console.log(Math.abs(parseInt(date1 / 60 * 60 * 1000 * 24) - parseInt(date2 / 60 * 60 * 1000 * 24)))
})
```

This is a very rudimentary example, but I have found a lot in my experience as a front-end engineer that when writing code, sometimes there is not a thought to abstract something that could be calculated / used somewhere else.

How might we make the above code a bit more abstract? Or how might we break out some functionality to be able to be used elsewhere?

Take this modified code sample for example:

*date.js*
```
document.addEventListener('submit', () => {
	let date1 = document.getElementById('date1').valueAsDate
	let date2 = document.getElementById('date2').valueAsDate

	console.log(calculateDaysBetween(date1, date2))
});

function calculateDaysBetween(date1: Date, date2: Date): number {
	const toDays = 60 * 60 * 1000 * 24;
	return Math.abs(parseInt(date1 / toDays) - parseInt(date2 / toDays));
}
```

The above takes the hard-to-read bit in the `console.log()` from the first script block and makes it easier to read *and* makes it so we can call it anywhere.

Writing code in a way that is very *easy* to read is caring for your fellow developer, and it makes it easier for you to come back to in a few months and not want to pull your hair out!

Happy abstracting!
npm start error with react
Published: 2020-09-10 18:58:57

My code was working perfectly. After running create-react-app and npm start, the react logo would appear in localhost 3000. Beautiful. Then it just started giving me errors. I even started a fresh repository and installed react under a different filename. pakage.json is clearly in the directory. No go. What gives?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qg6cc4z6uk0eiocecrs.png)
Getting Push Notifications for Everything with Pushover
Tags: github, devops, productivity, webdev
Published: 2020-09-10 19:22:36

---
title: Getting Push Notifications for Everything with Pushover
published: true
date: 2020-09-10 18:52:17 UTC
tags: ["github", "devops", "productivity", "webdev"]
canonical_url: https://www.joshkasuboski.com/posts/pushover-notifications/
---

I wanted to know when my personal site was deployed and decided to get push notifications.

I make changes to my site locally and then push to GitHub so it is automatically deployed using GitHub Pages. I went over that in [Deploying this site with GitHub Actions](https://www.joshkasuboski.com/posts/deploy-site-github-actions/). After I pushed though, I would often have to keep checking to see when it should be available. Now I get notified.

## Setting up Pushover

In order to get push notifications from multiple apps, I signed up for [Pushover](https://pushover.net/). This lets me install just the Pushover app and all notifications will come through there.

I signed up for an account and downloaded the app. I was immediately able to manually send notifications. My original intention was to set this up for GitHub Actions though.

I created a Pushover app to get an API Token. Using this token and your user key, you can send notifications with an API call.

## Adding to GitHub Actions

To get the status of my [personal-site workflow](https://github.com/kasuboski/personal-site/blob/master/.github/workflows/gh-pages.yaml), I just need to `curl` the endpoint with my token and user key.

I added both to my repo secrets and then could add the below step at the end of my workflow.

```
- name: Notify
  if: always()
  uses: wei/curl@v1
  with:
    args: -X POST -F 'token=${{ secrets.PUSHOVER_TOKEN }}' -F 'user=${{ secrets.PUSHOVER_USER }}' -F 'message=Personal Site Pipeline ${{ job.status }}' https://api.pushover.net/1/messages.json

```

## And more

Pushover has a number of [integrations](https://pushover.net/apps). I have it setup to send me [UptimeRobot](https://uptimerobot.com/) alerts and also use it for Radarr. UptimeRobot just required me to add my user key and I immediately got a test message.

No longer will I be checking the status of anything 😉.
Maintainers: what was your early open-source expectation v.s. reality?
Tags: discuss, hacktoberfest
Published: 2020-09-10 18:36:59

---
title: Maintainers: what was your early open-source expectation v.s. reality?
published: true
description: In honor of Hacktoberfest and Preptember, I'd love to get in the mindset of code newbies so Hacktoberfest 2020 can be the friendliest one yet!
tags: discuss, hacktoberfest
---

I'll bet you didn't know that all of those pumpkin spice flavors returning to coffee menus are actually in honor of 🎃 **_Preptember_** 🎃! 

{% link https://dev.to/devteam/preptember-start-getting-ready-for-hacktoberfest-this-month-58cn %}

With [Hacktoberfest](https://hacktoberfest.digitalocean.com/) less than a month away and open source maintainers spending September getting their repos ready for contributors, I'm curious about something...

> ### **Getting back in the mindset of being brand new to the open-source community, what expectations did you have about making contributions before your first-ever PR? What was the reality?**

---

Hacktoberfest is obviously open to all levels of contributors, but it is a great opportunity for newbies to get involved in the ecosystem. With that in mind, I think it's important to put ourselves back in their shoes during Preptember. In doing so, hopefully your repos will be ready and welcoming to _all_ contributors keen on making an impact.

**Maintainers, I'd love your thoughts!**
Install VMWare tools on windows 10
Published: 2020-09-10 18:28:13

VMware tools are important additional tools by VMware for the desktops. whenever you install VMware workstation on your windows 10 PC, SO then you must remember to install VMware tools too.

The installation of VMware tools is very easy. However, one always needs the help of others to correctly install the software. Below I have guided the complete steps on how to install VMware tools on windows 10.

Exactly when you've brought a working system into a VMware virtual machine, you should present a critical application called VMware Gadgets before you do whatever else. VMware Gadgets gives a combination of huge capacities with respect to a VMware virtual machine: 

In a general sense improved delineations execution 

Basic envelopes, which lets you share coordinators between the virtual machine and the host, making it easy to exchange archives between the two 

A typical clipboard, which permits you to reorder between the virtual machine and the host 

The synchronized time between the guest and host 

Better control of the mouse among guest and host 

To present VMware Instruments, follow this strategy: 

Start the virtual machine. 

On the menu of the VMware uphold window, pick Player→Manage→Install VMware Mechanical assemblies. 

The trade box showed up here appears. 

Presenting VMware Instruments. 

Presenting VMware Instruments. 

Snap Download and Present. 

The VMware Gadgets are downloaded to the guest's working structure. The Course of action program shows the Welcome screen. 

Presenting VMware Instruments. 

Presenting VMware Instruments. 

If the Game plan program doesn't normally start, press Windows+R, type d:setup.exe, and press Enter. This will genuinely start the Game plan program. 

Cling to the bearings in the Game plan program to present the VMware devices. 

Exactly when the gadgets are presented, you'll be prompted to restart the virtual machine.


you can also read a more extensive guide.

https://techvatan.com/how-to-install-vmware-tools-in-windows-10/


Moreover, this article also could be helpful in this regard.

https://techvatan.com/install-macos-mojave-on-vmware-on-windows/
Local Kubernetes testing with KIND
Tags: kubernetes, docker, devops
Published: 2020-09-10 18:22:22

#Intro#

If you've spent days (or even weeks?) trying to spin up a Kubernetes cluster for learning purposes or to test your application, then your worries are over. Spawned from a Kubernetes Special Interest Group, KIND is a tool that provisions a Kubernetes cluster running IN Docker. 

From the docs:

> `kind` is a tool for running local Kubernetes clusters using Docker container "nodes".
`kind` is primarily designed for testing Kubernetes 1.11+, initially targeting the [conformance tests](https://github.com/kubernetes/community/blob/master/contributors/devel/conformance-tests.md).

#Installing KIND#

As it is built using `go`, you will need to make sure you have the latest version of `golang` installed on your machine. 

According to the k8s [docs](https://kind.sigs.k8s.io/docs/contributing/getting-started/), `golang -v 1.11.5` is preferred. To install kind, run these commands (it takes a while):

```
go get -u sigs.k8s.io/kind
kind create cluster
```

Then confirm `kind` cluster is available:

```
kind get clusters
```

#Setting up kubectl#

Also, install the latest `kubernetes-cli` using [Homebrew](https://brew.sh/) or [Chocolatey](https://chocolatey.org/).The latest Docker has Kubernetes feature but it may come with older `kubectl` . Check its version by running this command:

```
kubectl version
```

Make sure it shows `GitVersion: "v1.14.1"` or above.If you find you are running `kubectl` from Docker, try `brew link` or reorder path environment variable.

Once `kubectl` and kind are ready, open bash console and run these commands:

```
export KUBECONFIG=”$(kind get kubeconfig-path)”
kubectl cluster-info
```

If `kind` is properly set up, some information will be shown.Now you are ready to proceed. Yay!

#Deploying first application#

What should we deploy on the cluster? We are going to attempt deploying Cassandra since the docs have a pretty decent walk-through on it. 

First of all, download [`cassandra-service.yaml`](https://kubernetes.io/examples/application/cassandra/cassandra-service.yaml) and [`cassandra-statefulset.yaml`](https://kubernetes.io/examples/application/cassandra/cassandra-statefulset.yaml) for later. Then create `kustomization.yaml` by running two `cat` commands.Once those `yaml` files are prepared, layout them as following:

```
k8s-wp/
  kustomization.yaml
  mysql-deployment.yaml
  wordpress-deployment.yaml
```

Then apply them to your cluster:

```
cd k8s-wp
kubectl apply -k ./
```

###Validating (optional)###

Get the Cassandra Service.

```
kubectl get svc cassandra
```

The response is:

```
NAME        TYPE        CLUSTER-IP   EXTERNAL-IP   PORT(S)    AGE
cassandra   ClusterIP   None         <none>        9042/TCP   45s

```

Note that Service creation might have failed if anything else is returned. Read [Debug Services](https://kubernetes.io/docs/tasks/debug-application-cluster/debug-service/) for common issues.

#Finishing up#

That's really all you need to know to get started with KIND, I hope this makes your life a little easier and lets you play with Kubernetes a little bit more :)
Django 3…2…1… Takeoff! Series (Beginner Friendly)- Overview
Tags: django, webdev, python, tutorial
Published: 2020-09-10 18:12:43

{% youtube eTiy3DX4228 %}

The video above shows the overview of what we are going to be building in this series.

**Full disclaimer:**

I wrote the book called:

[*Django 3…2…1…Takeoff!: Quick Guide to Learning Django 3 Web Development*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)

This series will be composed of most but not all the chapters from my book. If you would like to build a website like the one in the video, style it using Bootstrap, learn to use Amazon Web Services (AWS RDS and S3 buckets), and deploy the website on Heroku without waiting for the whole series to be posted, you can get the book and start building or you can follow along with the tutorials. 

Regardless of any way you choose to follow along, welcome and happy programming.

**Table of Contents: (Bolded chapters and their subsections will be covered in this series)**

**Chapter 1 : Django Web App Setup**
- Visual Studio and Packages Installation
- Listings App
- Database Setup
- Static and Media Files Setup
- Linter Setup (Optional)
- Django Simple Web App

**Chapter 2: Django Basics**
- Django MVC Pattern
- Django Admin Site
- Listings Model

**Chapter 3: Homepage**

**Chapter 4: Listings Page**
- Database Queries

**Chapter 5: New Listing Page**

**Chapter 6: Navbar**

**Chapter 7: Detail Listing Page**

**Chapter 8: My Listings Page**

**Chapter 9: Edit Listing Page**

**Chapter 10: Delete Listing Page**

Chapter 11: Users App
- Login Page

Chapter 12: Register Page

Chapter 13: Foreign Key

Chapter 14: Images

Chapter 15: Django Filters

Chapter 16: Styling with Bootstrap (Part I)

Chapter 17: Styling with Bootstrap (Part II)
- Django Crispy Forms

Chapter 18: AWS — Amazon Relational Database Service (RDS)
- Amazon RDS Creation
- Connecting to Amazon RDS

Chapter 19: Amazon S3 Buckets
- Amazon S3 Bucket Creation

Chapter 20: Heroku Deployment

I will be putting out articles/tutorials often. You can follow me on my personal website too:


**Website:**

On my website, you can also find a post about why I decided to write Django 3…2…1…Takeoff!.

[*baltlogs.com*
](https://baltlogs.com)

If you have any questions, leave them in the comments section.

If you would like to show your support, you can find the book below. 

[*Django 3…2…1…Takeoff!: Quick Guide to Learning Django 3 Web Development - Kindle*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)

[*Django 3…2…1…Takeoff!: Quick Guide to Learning Django 3 Web Development - Paperback*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)
Switch A Django Project To Use Pytest - Building SaaS #57
Tags: python, django, pytest, testing
Published: 2020-09-10 18:11:31

{% youtube 3UdD-nFXUlw %}

In this episode, I replaced the default Django test runner to use pytest.  We walked through installation, configuration, how to change tests, and the benefits that come from using pytest.

We started by looking at the current state of the test suite to provide a baseline to compare against.  After that, I went to PyPI to find the version of `pytest-django` that we wanted to install.  I added the package to my `requirements-dev.txt` and installed the update.

```bash
$ pip install -r requirements-dev.txt
```

I created a `pytest.ini` file and configured the package by setting the `DJANGO_SETTINGS_MODULE`.  I initially typed the name of the setting incorrectly (forgetting the second `S`) so we debugged the failure case too.

Once pytest was running, we observed that all the tests passed.  This behavior surprised me because I thought that the test would need to be marked to use a database.  We dug into the details of the test execution to see which Python fixtures were used.  We talked a bit about how fixtures worked.

I finished the stream by going through some tests and switching the assertion styles.  We compared and contrasted assertions from `unittest` style tests versus pytest assertions.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/switch-django-app-to-use-pytest/).