One of the biggest security issues with web applications is Cross Site Scripting XSS. In an XSS attack, malicious code is added to HTML that we expect the browser to parse, thus rendering and executing the malicious code on the page. Let's assume that we have the following template. js foreachreview in reviews { ${review.title} ${review.text} } And then we feed it the following data: text // Review 1 Title: Friendly and delicious! Text: The Restaurant is right in the center of town. It has top food en it's a very nice place with a friendly and professional staff //Review...
In dialogues in the webhttps://publishing-project.rivendellweb.net/dialogues-in-the-web/ we saw how to create native dialogues using HTML and Javascript. This post will look at how to style the dialogues and the parent element. Styling the dialogue element The first item to style is the dialog element itself. In this example, we set the width of the modal dialogue to 50ch and a 1em padding. We can add more styles as necessary. css .modal { padding: 1em; max-width: 50ch; } Styling the backdrop The other CSS rule is the ::backdrop pseudo-element. The ::backdrop CSS pseudo-element is a box the size of the viewport that...
I found an interesting thing that would make it easy to create dialogues for web applications. The dialog element represents a dialog box or other interactive components, such as a dismissible alert, inspector, or subwindow. This post will walk through creating dialogues using the dialogue element. To get started we need some HTML on the page. We need a button we can click to open the dialogue. html open modal We also need the dialogue that we want to open. Even though the dialog is on the page it won't be displayed until we open it. The close button inside...
A lot of times we'll hear about semantic markup and its importance on one hand and how you can create really odd or broken markup and it will still render in browsers. The example that still catches my attention. People say that this is valid HTML: html demo page Demo Page Title Content goes here It is not valid HTML. It relies on the backward compatibility requirements of modern browsers regarding broken HTML content. Chrome, for example, will insert the missing elements to make the page render correctly. This is how Chrome will show the page in DevTools: html demo...
It is easy to think that everything will work with mouse clicks on the web. However, many devices support other types of pointing input devices, such as pen/stylus and touch surfaces so we need a way to work with all of them without writing duplicate code. According to MDNhttps://developer.mozilla.org/en-US/docs/Web/API/Pointerevents: > The pointerhttps://developer.mozilla.org/en-US/docs/Web/API/Pointereventspointer is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating Web sites and applications and provide a good user experience regardless of the user's hardware. However, for scenarios when device-specific handling is desired, pointer events...
Reading min, max, and clamp: three logical CSS functions to use todayhttps://web.dev/min-max-clamp/ presented an interesting case for using clamphttps://developer.mozilla.org/en-US/docs/Web/CSS/clamp: Controlling the width of a text-container. In typography books, we're told that text should be between 45 and 75 characters wide. Until I saw the example, I hadn't thought about using clamp in combination with the chhttps://developer.mozilla.org/en-US/docs/Web/CSS/length length unit to express this requirement. In the following code snippet, we tell the browser that we want the width of the article to be 50% of the screen width but no smaller than 45ch or larger than 75ch, regardless of the viewport size....
As documented in CSS values and unitshttps://developer.mozilla.org/en-US/docs/Learn/CSS/Buildingblocks/Valuesandunits there are new or lesser-known units. The first table, taken from MDN, shows the most common / better known to me viewport units | Unit | Relative to | | --- | --- | | vw | 1% of the viewport's width. | | vh | 1% of the viewport's height. | | vmin | 1% of the viewport's smaller dimension. | | vmax | 1% of the viewport's larger dimension. | Most of the time I will limit my use of viewport units to vh and vw. The table below shows a...
There are layouts that are only possible with columns. Thinking about IEEE and ACM paper formats. !Example of a two-column paper for ACM publicationshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/acm-paper-template !Example of a paper formatted for IEEE publicationhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/ieee-format-paper The biggest difference is that the paper formats are paginated so it's relatively easier to shift from one column to another and from page to page. Because the web is one continuous format, reading columns becomes much harder since we have to scroll to get to the bottom of one column and then scroll to the top to start the next one. If we have small blocks of...
We have many ways of reading content and they will all be different. So how to best optimize font size for reading long-form content online? For this exercise we'll define three sizes for the content: small: to be read at a close distance medium: our default size to be read while sitting on your desk large: to be read farther away than medium or on larger screens For the sake of experimentation I've chosen the following sizes small: 12 points medium: 16 points large: 24 points The idea is that the farther away we are reading from the larger we...
OpenType fonts, both static and variable, make additional features available for developers to use. CSS makes these features available via the font-feature-settings property. Just like with font variations in variable fonts, we can use tools like Wakamaifonduehttps://wakamaifondue.com to see what OpenType features are available since they vary based on the font and to download a stylesheet with all CSS necessary to use the features on your own project. We first set custom properties for each of the available OpenType layout features on the :root pseudo-element. We set them disabled by default so we can enable them for specific elements and...
