Create Custom Video Player Controls with CanJS

In this guide, you will learn how to create a custom video player using the

Link: https://davidwalsh.name/custom-html5-video

Creating a Signature Pad Using Canvas and ASP.NET Core Razor Pages

In one of our projects, we needed to add the possibility to add signatures to PDF documents. A technician fills out a checklist online and a responsible person and the technician need to sign the checklist afterward. The signatures then get embedded into a generated PDF document together with the results of the checklist. The signatures must be created on a web UI, running on an iPad Pro.
It was pretty clear that we needed to use the HTML5 canvas element and to capture the pointer movements. Fortunately, we stumbled upon a pretty cool library on GitHub, created by Szymon Nowak from Poland. It is the super awesome Signature Pad written in TypeScript and available as an NPM and Yarn package. It is also possible to use a CDN to use the Signature Pad.

Link: https://dzone.com/articles/creating-a-signature-pad-using-canvas-and-aspnet-c?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Handling Forms With React and HTML5 Form Validation API

When we talk about user input within a web app we often think first of HTML forms. Web forms have been available since the very first editions of HTML. Apparently, the feature was introduced already in 1991 and standardized in 1995 as RFC 1866. We use them everywhere, with almost every library and framework. But what about React? Facebook gives a limited input on how to deal with forms. Mainly it’s about subscribing forms and controls for interaction events and passing state with the “value" property. So form validation and submission logic are up to you. Decent UI implies you cover such logic as "on submit"/"on input" field validation, inline error messaging, toggling elements depending on validity, "pristine," "submitting," states, and more. Can we not abstract this logic and simply plug it in our forms? We definitely can. The only question is what approach and solution to pick up.
Forms in a DevKit
If you go with a DevKit like ReactBootstrap or AntDesign you are likely already happy with the forms. Both provide components to build a form that meets diverse requirements. For example, in AntDesign we define a form with the Form element and a form field with FormItem, which is a wrapper for any input control out of the set. You can set validation rules on FormItem like:

Link: https://dzone.com/articles/handling-forms-with-react-and-html5-form-validatio?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

On Leading and Trailing Spaces in HTML Attribute Values

In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):
This happens because spaces are not allowed in an ID selector. But interestingly, there is a way around that using CSS’s attribute selector:

Link: https://www.impressivewebs.com/leading-trailing-spaces-html-attribute-values/

Using the `for` Attribute on the `output` Element in HTML5

There are two things here that you’re probably already aware of. First, HTML includes an element that allows you to display the “result of a calculation”. It’s a form element and it’s been around for some time, having been added in HTML5.
The other thing you’re likely to be aware of is that the for attribute is normally used on the <label> element to associate a <label> with a form element. This aids accessibility and usability, as you’ve probably discovered as both a developer and a user. But interestingly, the for attribute can also be used on the <output> element:

Link: https://www.impressivewebs.com/using-for-attribute-output-element-html5/

Creating a Parking Game With the HTML Drag and Drop API

Among the many JavaScript APIs added in HTML5 was Drag and Drop (we’ll refer to it as DnD in this article) which brought native DnD support to the browser, making it easier for developers to implement this interactive feature into applications. The amazing thing that happens when features become easier to implement is that people start making all kinds of silly, impractical things with it, like the one we’re making today: a parking game!
DnD requires only a few things …
The post Creating a Parking Game With the HTML Drag and Drop API appeared first on CSS-Tricks.

Link: https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/

Game AI: The Bots Strike Back!

The following is a short extract taken from our new book, HTML5 Games: Novice to Ninja, written by Earle Castledine. Access to the book is included with SitePoint Premium membership, or you can grab a copy in stores worldwide. You can check out a free sample of the first chapter here.
We have all the tools at our disposal now to make fantastically detailed worlds to explore and inhabit. Unfortunately, our co-inhabitants haven’t proved themselves to be very worthy opponents. They’re dumb: they show no emotion, no thought, no anima. We can instill these characteristics via graphics, animation, and above all, artificial intelligence (AI).
Artificial intelligence is a huge and extremely complex field. Luckily, we can get impressive results even with a lot more artificial than intelligence. A couple of simple rules (combined with our old friend Math.random) can give a passable illusion of intention and thought. It doesn’t have to be overly realistic as long as it supports our game mechanics and is fun.
Like collision detection, AI is often best when it’s not too good. Computer opponents are superhuman. They have the gift of omniscience and can comprehend the entire state of the world at every point in time. The poor old human player is only able to see what’s visible on the screen. They’re generally no match against a computer.
But we don’t let them know that! They’d feel bad, question the future of humanity, and not want to play our games. As game designers, it’s our job to balance and dictate the flow of our games so that they’re always fair, challenging, and surprising to the player.
Intentional Movement
Choosing how sprites move around in the game is great fun. The update function is your blank canvas, and you get godlike control over your entities. What’s not to like about that!
The way an entity moves is determined by how much we alter its x and y position every frame (“move everything a tiny bit!”). So far, we’ve moved things mostly in straight lines with pos.x += speed * dt. Adding the speed (times the delta) causes the sprite to move to the right. Subtracting moves it to the left. Altering the y coordinate moves it up and down.
To make straight lines more fun, inject a bit of trigonometry. Using pos.y += Math.sin(t * 10) * 200 * dt, the sprite bobs up and down through a sine wave. t * 10 is the frequency of the wave. t is the time in seconds from our update system, so it’s always increasing linearly. Giving that to Math.sin produces a smooth sine wave. Changing the multiplier will alter the frequency: a lower number will oscillate faster. 200 is the amplitude of the waves.
You can combine waves to get even more interesting results. Say you added another sine wave to the y position: pos.y += Math.sin(t * 11) * 200 * dt. It’s almost exactly the same as the first, but the frequency is altered very slightly. Now, as the two waves reinforce and cancel each other out as they drift in and out of phase, the entity bobs up and down faster and slower. Shifting the frequency and amplitude a lot can give some interesting bouncing patterns. Alter the x position with Math.cos and you have circles.
The important aspect of this is that movements can be combined to make more complex-looking behaviors. They can move spasmodically, they can drift lazily. As we go through this chapter, they’ll be able to charge directly towards a player, or to run directly away. They’ll be able to traverse a maze. When you combine these skills (a bobbing motion used in conjunction with a charge-at-player), or sequence them (run away for two seconds, then bob up and down for one second) they can be sculpted into very lifelike beings.
Waypoints
We need to spice up these apathetic ghosts and bats, giving them something to live for. We’ll start with the concept of a “waypoint”. Waypoints are milestones or intermediate target locations that the entity will move towards. Once they arrive at the waypoint, they move on to the next, until they reach their destination. A carefully placed set of waypoints can provide the game character with a sense of purpose, and can be used to great effect in your level design.

Continue reading %Game AI: The Bots Strike Back!%

Link: https://www.sitepoint.com/game-ai-the-bots-strike-back/

Comparison of JavaScript Pivot Grids for Developers

In this article, I’d like to consider the most popular JavaScript pivot grid components. During this review, I won’t dive into the coding since each grid has exhaustive and well-written documentation (at least, I hope so). Instead, I’ll focus on the core features of each pivot grid. Since I believe that there are some beginner developers among the readers, I’ll pay particular attention to documentation and demo pages. It’s a pretty convenient way to learn something while having a working example before your eyes. Therefore, demo pages with code examples and detailed descriptions will be a plus.
The principle of pivots selection is simple. I’ll check the most popular of those that can be used as stand-alone components. The reason is that I’m looking for relatively cheap and lightweight options leaving complex solutions for the future articles. So, let’s take a look at the list of JavaScript pivot grids I’m going to review today:

Link: https://dzone.com/articles/comparison-of-javascript-pivot-grids-for-developer?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev