teleren/devto huggingface dataset:
Validating HTML documents
Tags: html, beginners
Published: 2019-10-22 07:46:01

---
title: Validating HTML documents
published: true
description: A beginners guide to validating HTML documents
tags: html, beginner
series: FrontEnd Development Zero to Hero
---
Data validation is a means of confirming the integrity and correctness of data, just like in other fields, tools are employed for this in HTML.

There are paid products out there for validating HTML documents and there are free options which are the route we will be taking. But the question that might come to your mind is: why validate HTML?

Mistakes do happen when you code and there is a high chance you did not close a tag,  you left out a required attribute or your open and closing quotes do not match and due to the forgiving nature of HTML you might not notice this error.

If the HTML document you are working on is quite sizeable you can use the browser `viewsource` and visually hunt down the errors which are highlighted in red and using your mouse to hover these error you'll get brief information about the error which most of the time is what the browser thinks you (the developer) should have done.

![viewsource in firefox](https://thepracticaldev.s3.amazonaws.com/i/asvmpvhtqm75xo210zls.PNG)

This approach is not practical if the document is quite enormous. The [W3C has a validator](https://validator.w3.org/) that's free to use and it's available online. There are three methods for validating your data using this tool:

* Validation by URI
* Validation by file upload
* Validation by direct input

##__VALIDATION BY URI__
This method of validation allows you to submit the URL of the document (the website address) you want to check and the tool will do the rest.

![Validation By URI with the W3C Validator](https://thepracticaldev.s3.amazonaws.com/i/q9vsrkrducfyxplsj4hj.png)

##__VALIDATION BY FILE UPLOAD__
In this approach, you upload a local HTML file to the validator

![Validation By file upload with the W3C Validator](https://thepracticaldev.s3.amazonaws.com/i/uoglsawbv2ygd5bh6o9k.png)

##__VALIDATION BY DIRECT INPUT__
If the document you want to check is minute, this option is practical. In this regard, you copy the HTML source code and paste it into the validator and then validate it.

![Validation By Direct Input with the W3C Validator](https://thepracticaldev.s3.amazonaws.com/i/onn0fai6tw97zb1s1un9.png)

Below is an image that show's a minimal validation result by URI

![A site validated with W3C Validator](https://thepracticaldev.s3.amazonaws.com/i/8m4f8cetqhzmrtr3j6z2.PNG)
ActiveModel::Dirty Attribute Change
Tags: rails, ruby, activemodel
Published: 2019-10-22 07:20:08

---
title: ActiveModel::Dirty Attribute Change
published: true
description: Checking specific attribute if it change
tags: ruby on rails, ruby, active_model
---

##Sometimes we need to check specific attribute if change from it previous value before running an api for request limit.

The solution is activemodel::dirty

for after save
```
saved_change_to_attribute?
```

for before save
```
will_save_change_to_attribute?
```

Example

```
class User
  after_save api_update, if: :saved_change_to_name?
  before_save api_update, if: :will_save_change_to_position?

  def api_update
  end
end
```

These callbacks will run only if the attributes change from its previous value.
The Smallest Possible Mistake to make when using Promises
Tags: beginners, javascript, promise
Published: 2019-10-22 06:57:43

---
title: The Smallest Possible Mistake to make when using Promises
published: true
description: As someone who's learning JS when Promises are the norm, it seems I've sort of skipped this basic lesson on callbacks.
tags: beginners, javascript, promise 
---


Let's say you have a Promise, you do some stuff with it then just log back when all processing is finished:

```javascript
const promise = new Promise((res,rej) => setTimeout(res('Resolved'), 2000))

promise
  .then(result => console.log(result))
  .then(console.log('Success!'))
  .catch(console.log('Error!'))
```

What's wrong with that code? Well, here's the log:

```javascript
// Success!
// Error!
// Resolved
```

That is nothing like expected. What happened?

In fact, both `then` and `catch` expect functions as arguments. Those `console.log()`s are just statements, not functions, thus they're immediately evaluated.

The simplest solution is to turn those statements into anonymous functions:

```javascript
promise
  .then(result => console.log(result))
  .then(() => console.log('Success!'))
  .catch((err) => console.log('Error!'))

// Resolved
// Success!
```

Keep in mind this is not a quirk of Promises per se, but the language in general. Other functions that take callbacks are also prone to the same mistake:

```javascript
setTimeout(console.log('Timed out'), 10000)
// 'Timed out' is printed immediately
// Some environments would throw TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

setTimeout(() => console.log('Timed out'), 10000)
// 'Timed out' is printed after 10 seconds
```

As someone who's learning JS when Promises are the norm, it seems I've sort of skipped this basic lesson on callbacks.
Be a catalyst for change
Tags: pragmatic, programmer, change, empowerment
Published: 2019-10-22 06:42:56

---
title: Be a catalyst for change
published: true
description: Continuation of introspection into The Pragmatic Progammer, 20th anniversary edition
tags: pragmatic,programmer,change,empowerment
series: pragmatic-programmer
---

Sometimes you'll look at an existing situation, system, or even a single code file and recognise that it needs to change. It's not working as well as it could, and it probably makes it more difficult to move forward in other areas.

Sometimes that situation is one set up by people -- discrimination in the workplace, undertones of brogrammer culture which make it difficult for anyone who isn't a Chad to get anywhere. Sometimes it's that one piece of legacy code protected by the golden boy of the office. Everyone knows it's broken, but no-one wants to fix it and face the wrath of Captain Important.

The Pragmatic Programmer book brings up the story of [stone soup](https://www.michaelppowers.com/prosperity/stonesoup.html), from which two lessons are drawn. I'm just going to focus on the first today:

_Be a catalyst for change_

It's all to easy, when we see something wrong in the world, to just face it with apathy -- we're too small, too junior, we can't do all of that, we're not the superhuman Greta Thunberg -- we could never even dream of sailing across the Atlantic to protest inaction against climate change in another country.

And you know what? That may be true to some extent. There are people in this world who are mightier than we are. It doesn't mean that we can't make change though -- because a lot of little changes adds up really quickly.

So when you see the dudebros at your work engaging in exclusive behavior, when you see the elitist gate-keepers at work, when you even just see one code file which could be improved: then take the smallest step. Make the smallest change and move onward from there. Challenge the dudebros to be better men. Add tests around that elitist's code and then refactor it to be better. The little changes you make empower you (and others) to make more changes, to move forward instead of stagnating in the quagmire that has always been.

And when you see someone else trying to make incremental improvements, back them up. When someone fixes that legacy code, give them a kudos. When someone stands up to the brogrammers, stand with them. Now you're part of empowering positive change in the world.

_You don't have to fix the world, just make the little part you're in right now a little better, and, when we all do this, the world is in a better state overall._
A Transparent Development Automation Tool: Deploy place

Tags: devops, productivity, career
Published: 2019-10-22 06:33:02

Automate deployments with your custom-ready CI even for complex apps, to your servers or cloud. It is a transparent deployment tool by developers for developers, with the possibility to easily deploy complex applications, as well as static websites or client-side projects directly from your CI.

It is a software deployment tool that lets you deploy your applications, regardless of the level of complexity. This deployment product supports the deployment of Kotlin, Java, Scala applications, and does an excellent job of providing a live editor. With the editor, you can monitor and control every step involved in the software deployment process.

DeployPlace will amaze you with its focused features which positively hit the market.

Control your program with a live editor-

It is absolutely transparent, unlike other deployment tools, DeployPlace is one step up. It comes with a live editor which controls all your actions and makes things easy for you.

Get an advanced Dashboard for your applications-

This another feature that creates the history say deployPlace committed to auto-deploy and comes with external integrations such as Slack notifications, New Relic, Sentry, etc.

Working on any complex application- make it easy with DelpoyPlace-

The developers with DeployPlace easily deal with the complex application. Just prepared your CI and it will do all for you. Customizable deployment templates allow you to tweak any sensitive parameter to ensure every aspect of your server is set up properly.

DeployPlace will useful for developers who do not want to get involved in the deployment process of apps. So you can centre on writing code and developing features, with the support that it’ll be deployed with the highest standards when using DeployPlace. DevOps Developers looking to abstract complexities when deploying services will also find DeployPlace to be a great tool.

You only need to add the CI of your app and the server details and the job is done. CIs such as GitlabCI, CircleCI, TravisCI, BambooCI, and Jenkins are all supported.


This one is really cool for the developers, New as well as easy. Let’s move to 
https://codersera.com/blog/five-upcoming-tools-for-software-developers-you-should-keep-your-eye-on/the next tool that is:
How to set up Alexa?
Tags: downloadalexaapp, alexa
Published: 2019-10-22 06:31:10

If you recently bought yourself an echo device, you might surely be very excited to see how it works and enjoy its benefits. Every Amazon echo device is enables with Alexa; Alexa is a virtual assistant that basically responds to your voice commands. 
The commands may include playing you music, reading you your favorite audio book, checking the weather forecast, news updates and a pool of other stuff. It all comes down to the how many additional useful skills you have added to it. 
You can also control many smart home gadgets that support Alexa like lights, thermostats, switches, air-conditioners and more. 
To learn how to reap the benefits of Alexa, continue reading. 
In order to set up Alexa, you need to follow a few simple steps:
Step 1: Download the free Alexa app 
If you are an owner of an Amazon echo device, you need to have the free Alexa app. The app helps to set up your echo device. You can download it on your Smartphone or tablet and simply search for the Alexa app in the app store that comes in your device. Your device must be iOS 11.0 or higher, Android 5.1 or higher, or Fire OS 5.3.3 or higher.
You can also download the app in your PC by connecting your device to wifi and then opening the alexa.amazon.com website to download alexa app. 
Step 2: Plug in the echo device 
The simplest step in the process of setting up Alexa is plugging in the echo device. Simply attach the power adaptor into the echo and connect it to a power outlet. 
The light ring on the echo will turn blue once the power is connected. When it turns orange, it indicated that Alexa is preparing to greet you and you will soon hear Alexa’s voice telling you that the device is ready for set up. 
Step 3: Connect the echo to wifi
You will now have to connect the echo device to your wifi network. If you get stuck, simple launch the Alexa app and search for available networks. 
To get started with Alexa’s functioning, say the word i.e. Alexa. You can also change the wake word if you already have another echo device that responds to Alexa, just simply tell the echo, “Alexa, change the wake word.”
Now again, you can also change the wake word manually by using the app. 
Step 4: You can now start using your echo
Your Amazon echo device is all set up for use; you can utilize it to make your day to day life easy. To make sure that all the functions are intact, just test the device by making a few basic instructions. 
You can do that by saying the wake word and if your echo device is set up properly, Alexa will respond to it immediately. 
Echo device is much more than just a greeting device, you can explore various features of Alexa by checking the ‘skills and games and things to try’ by choosing the Alexa app menu in the app. 
So, challenge your creative side and use your newly set-up echo to add a dash of convenience to your life.
Differences between Dev and Stackoverflow.
Tags: humor
Published: 2019-10-22 06:08:22

Wait, wait, I know what you're thinking - This is comparing apples to oranges - but bare with me for a minute.

In **Dev**, we get to write articles - in **Stackoverflow**, we write questions and answers.

In **Dev**, we have hearts and unicorns - in **Stackoverflow** we have down votes. 

In **Dev**, discussion is encouraged - in **Stackoverflow**, comments aren't for discussion. You'll get banished to the chat.

In **Dev**, we can write (almost) anything we want - in **Stackoverflow**, your post gets closed as off topic and deleted.

In **Dev**, human interaction is encouraged - in **Stackoverflow**, words like "Thanks" and "Good day" in your post are considered as noise.

In **Dev**, the community is all about the developers - in **Stackoverflow**, we are only here for the questions and answers.

In **Dev**, every person is considered equal - in **Stackoverflow**, We're keeping score. 

In **Dev**, we're here to write, read, communicate and share ideas - in **Stackoverflow**, we're here to solve problems.


This post was inspired by a [sketch](https://www.youtube.com/watch?v=aoWsPRzzia8) of one of my personal all times favorites comedians - George Carlin. I know I'm not half as funny as he was, but I hope I did make you smile.
Import Tomcat Logs into Elasticsearch with Logstash file plugin
Tags: tutorial, testing
Published: 2019-10-22 05:34:04

In this article we are going to explore Input plugin for Logstash. In order to fetch Tomcat logs we need to write a config file for Logstash. 

input {
   file {
      path => "C:\Automation\Softwares\apache-tomcat-9.0.26\logs\*.log"
	  type => "apache"
	 # start_position => "beginning"
		#schedule you logstash to get new logs
		start_position => "end"
		stat_interval => "30 second"
   }
}
output {
     elasticsearch {
	 hosts => ["localhost:9200"]
     index => "ApacheTomcatLogs"
	 }
}

In filebeat.inputs: update,
paths: "C:\MyLogs\*" and  enabled: true

Now before running Logstash, ensure that both Kibana and Elasticsearch is up and running. Use this command to run Logstash.
logstash -f C:\Automation\ELK\ImportApacheLogsToLogstash.conf

Now, since we are also fetching this message to Elastcsearch. So, goto Management tab and then Index Pattern. We have to create a new index pattern. Creating Index Pattern meaning, mapping Kibana UI with Elasticsearch Index. To view data, goto Discover page, You can see your index will be coming over there.

That’s It
Hope you found it useful! If you ever need my help, you can write in comments sections. Also, you can contact me through my personal website: www.QATechTesting.com or through my LinkedIn Profile (https://www.linkedin.com/in/raghwendra-sonu/).
How to find a string, within a string, using Regex
Tags: help, javascript, webdev
Published: 2019-10-22 04:33:49

Thanks for stopping by.

I am stuck in a problem that I'm unable to solve. The problem is like as follows

a = "The Macports"
b = "macport"
c = "The Initial Macports"
d = "The Oscar Macports Initial Time"
e = "macports"
f = "The fastest macport"

All the above are strings where the common word is **macport**. Just like these 6 strings I am operating on a data of almost 1000 variation like this.

I am trying out to find the strings which contains the name **macport** or **macports**.

Glad if you could give me suggestions or discuss about it, how to fix it
Part 1: Build a Kubernetes "Intelligent Edge" Cluster on Raspberry Pi
Tags: raspberrypi, kubernetes, azure, msiot
Published: 2019-10-22 04:19:39

---
title: Part 1: Build a Kubernetes "Intelligent Edge" Cluster on Raspberry Pi
published: true
description: Building a Kubernetes "Intelligent Edge" cluster on Raspberry Pi is a great learning experience, a stepping stone to building robust "Intelligent Edge" solutions, and an awesome way to impress your friends.
tags: #raspberrypi #kubernetes #azure #msiot
---

![Raspberry Pi Kubernetes Cluster](https://raw.githubusercontent.com/gloveboxes/Raspberry-Pi-Kubernetes-Cluster/master/Resources/rpi-kube-cluster.jpg)

Follow me on Twitter [@dglover](https://twitter.com/dglover)

## Introduction

Building a Kubernetes _Intelligent Edge_ cluster on Raspberry Pi is a great learning experience, a stepping stone to building robust _Intelligent Edge_ solutions, and an awesome way to impress your friends. Skills you develop on the _edge_ can be used in the _cloud_ with [Azure Kubernetes Service](https://azure.microsoft.com/en-au/services/kubernetes-service/?WT.mc_id=devto-blog-dglover).

The Kubernetes cluster is built with Raspberry Pi 4 nodes and is very capable. It has been tested with Python and C# [Azure Functions](https://azure.microsoft.com/en-au/services/functions?WT.mc_id=devto-blog-dglover), [Azure Custom Vision](https://azure.microsoft.com/en-au/services/cognitive-services/custom-vision-service?WT.mc_id=devto-blog-dglover) Machine Learning models, and the [NGINX](https://www.nginx.com/) Web Server.

This project forms the basis for a four-part _Intelligence on the Edge_ series. The followup topics will include:

* Build, debug, and deploy Python and C# [Azure Functions](https://azure.microsoft.com/en-au/services/functions?WT.mc_id=devto-blog-dglover) to a Raspberry Pi Kubernetes Cluster, and learn how to access hardware from a Kubernetes managed container.

* Developing, deploying and managing _Intelligence on the Edge_ with [Azure IoT Edge on Kubernetes](https://docs.microsoft.com/en-us/azure/iot-edge/how-to-install-iot-edge-kubernetes?WT.mc_id=devto-blog-dglover).

* Getting started with the [dapr.io](https://dapr.io?WT.mc_id=github-blog-dglover), an event-driven, portable runtime for building microservices on cloud and edge.

## System Configuration

![](https://raw.githubusercontent.com/gloveboxes/Raspberry-Pi-Kubernetes-Cluster/master/Resources/network.png)

The Kubernetes cluster set up is fully scripted and well documented.

Head to [Building a Kubernetes _Intelligent Edge_ Cluster on Raspberry Pi](https://github.com/gloveboxes/Raspberry-Pi-Kubernetes-Cluster) on GitHub to learn more.
Day 7 -Project- Intuit Sign Up Page - Part 1
Tags: codenewbie, html, css
Published: 2019-10-22 04:09:51

Between work, life and studying, I have been running on empty. 

My goal as I am going through this journey is to code/ learn everyday. Some days are more intense than others but I pay attention to when my brain can't no longer handle it.

My next project for HTML/CSS is to recreate the Intuit Sign Up form. This time around, I designed the skeleton of the project on paper. I am finding that it is way easier to actually code if you have planned your layout and gathered images or anything else you may need.

Here is a look at what I planned.

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


At this time I have not completed it but here is a preview:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4zj4pmz1mqs685f06tbw.png)

I will complete this tomorrow. As I am learning to change career, I have to remind myself to not race to complete something but rather take the time to understand it and only then I will move on.

On to a new day!
Switching from Software Developer to Game Developer: good or bad?
Tags: career, software, game, developer
Published: 2019-10-22 04:04:00

Finally, after working 2+years as Software Developer my dream of being a Game Developer has come true.
From childhood i was always a fan of computer games. But as being from middle class family i couldn't afford any computer that time. My parents also didn't like kids to play games. When i got admission into the university my father gift me a small notebook pc. Which has so little configuration that i only can play miniclips games.
But after my graduation i started work for small companies and clients. And i managed some money to buy a average configuration vivobook. I always wanted to play "Ori and the blind forest". I started playing it in my vivobook.
As a computer science student and software engineer i was always obsessed with the game engine and it's architecture how they works. And started my research on different different game engines like unity, unreal, godot etc. I thought if i could become a game developer one day.
From university i used to do some graphics and animation works. Which are helping me now.
Learning new things is my hobby. Love to challenge myself. Hard and sophisticated problem solver. Game development is the most complex software engineering. Let's see how far i can go with my game development career.
React Context: (CRUD / REST)-ful Entities
Tags: react, context, crud, rest
Published: 2019-10-22 02:36:39

# TLDR;
Here's a link to a codesandbox that uses react context to create a (CRUD / REST)-like interface to local entities. (think: index, new, show, edit, update, destroy)
https://codesandbox.io/s/posts-context-8y1ub?fontsize=14&module=%2Fsrc%2FApp.tsx

# Background

Recently, I've been in a [codesandbox.io](https://codesandbox.io/) template kick, making starter templates for various purposes. I've got one for [generic react](https://codesandbox.io/s/starter-rtsh3), one for [react with react-router](https://codesandbox.io/s/starter-router-7t7v6). And now, I've got one for a [react context](https://codesandbox.io/embed/posts-context-8y1ub).


# Meat n' Potatoes
In this template, the context provides a restful-ish interface for a `Posts` entity.

The context provides a state like this:

```typescript
interface State {
  posts: { [id: string]: Post };
  ids: Post["id"][];
}

...

const ids = usePostIds(); // index-ish
const posts = usePosts(); // index
const post = usePost(123) // show / edit
```

And behavior like this:

```typescript
const newPost = useNewPost()          // create
const updatePost = useUpdatePost(123) // update
const deletePost = useDeletePost(123) // destroy

...

<button onClick={() => newPost({ id: 123, title: "first post" })}>Create</button>
<button onClick={() => updatePost({ ...post, title: "updated: })}>Update</button>
<button onClick={() => deletePost()}>Delete</button>

```

# Thoughts...

Well, I haven't put it into anything significant yet, but it *seeeeeeems* like it makes it simple to add a new entity to keep track of, if you want to treat it in a similar way.

I was able to encapsulate some basic async stuff in the components, and keep all the local state management synchronous.

```typescript
const savePostToRemoteServer = (post: Post) => {
    setPending(true);
    return wait(1000)
      .then(() => {
        if (!isMounted()) return
        newPost(post);
      })
      .finally(() => {
        if (!isMounted()) return
        setPending(false);
        setTitle("");
      });
  };
```

I haven't done any error handling, so who know how that would go. Probably keep it all in the components alongside the async stuff.

It's not super faithful to either CRUD or REST and the naming convention is mixed, so...who knows.

# Anyway....

Here's the link to the codesandbox if you want to dive more into it.

https://codesandbox.io/s/posts-context-8y1ub?fontsize=14&module=%2Fsrc%2FApp.tsx

# Feedback
Let me know what you all think. Your feedback is very valuable.
Thanks.