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.
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:
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:
The news is coming fast and furious these days. Last week I offered up a big update on my SVG book (which I’m still in the process of finishing) and now I’m pleased to announce that we just released HTML5 Boilerplate 6.1. In addition to the regular updates to dependencies, etc. the biggest change was […]
p>As you probably know, there are a number of HTML attributes that are considered global because they can be applied to any HTML element. Common examples include class, id, style, and tabindex.
One that was added a number of years ago in HTML5, and you may have forgotten about, is used on two elements in the following code:
There are two things here that you’re probably already aware of. First, HTML includes an
DnD requires only a few things …
The post Creating a Parking Game With the HTML Drag and Drop API appeared first on CSS-Tricks.
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.
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.
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!%
HTML and CSS are always evolving, offering front-end devs and web designers a lot of new possibilities. Today, let’s have a look at 5 really exciting new HTML and CSS features for creating better websites in 2018.