One of the most frustrating things that happen when I print a web page is that all links appear as underlined text without any reference to what the links point out to. One way to solve the problem without Javascript is to use generated content to append the full URL to the link and use print specific stylesheets so that it'll only happen when we print the document. Dudley Storey provides another way to accomplish the same goal using Javascripthttp://thenewcode.com/1186/Better-Links-for-Printed-Web-Pages-with-JavaScript. It doesn't require an additional stylesheet but, depending on the length of the document, may be hard to move back...
It's been possible to work in multiple columns of text without having to resort to hacks to make columns work in multiple browsers and in multiple form factors. According to caniuse.com developers need to pay attention to the following caveats: - Firefox doesn't support the break-before, break-after, break-inside properties but supports the page-break-\ properties to accomplish the same result. - WebKit-based based browsers support the non-standard -webkit-column-break-\ properties to accomplish the same result but only the auto and always values - Before Chrome 63, the browser supports the non-standard -webkit-column-break-\ properties to accomplish the same result but only the auto...
Design systems are interesting because of how they scale design to multiple teams and multiple sites/products while still providing a consistent and recognizable brand. For a full introduction to design systems, see Introducing Design Systemshttps://www.designbetter.co/design-systems-handbook/introducing-design-systems The work I do is not always conducive to creating a design system but it's always good to know about them so we can jump in without having to start completely from scratch. That said we'll look at three areas: - Building a basic component using just HTML, and CSS - Building the same component using existing design systems - Material Design from Google -...
I've always wanted to avoid manually doing data replacement and numbering if I can avoid it. We'll add counters for the following: - Chapters defined by elements - Sections defined by elements - Figures will be tied to chapters - Tables will be tied to chapters We'll work with the headings first and then add whatever we need to so that figures and tables work as designed. Chapters, sections, and subsection The basic structure of the styles is the same: If needed we reset counters using counter-reset and increase the appropriate counters using counter-increment. We then use the ::before pseudo-element...
3D content is a really interesting way to create interactive content for the web but until recently it has been a pain to develop on a Mac, particularly since most device makers decided early on that Macintosh hardware wasn't powerful enough to work with their devices see, this post from 2015https://www.oculus.com/blog/powering-the-rift/ outlining the minimal hardware support level and, partly, why it won't work with Apple hardware and, though things seem to be getting better with newer Apple hardware releases, I'm not holding my breath and neither is Macworld UKhttps://www.macworld.co.uk/feature/mac/can-you-use-oculus-rift-with-mac-3634238/. While direct development with the Oculus SDK is out of the...
Dropcaps have always been a pain in terms of implementation and cross-browser support. Perhaps you've seen something like this in CSS style sheets before: css p::first-letter { color: FE742F; float: left; font-size: 5em; margin: 0 .2em 0 0; } This will create a 5em first letter for paragraph elements. Which is good if you only have one paragraph worth of text but, as this codepenhttps://codepen.io/caraya/pen/WaGyqN illustrates, longer text gets more drop caps than intended. There is a pseudo-selector that will help with this. first-of-type selects the first child of the chosen type inside its parent. So, for our drop cap...
The idea is to create the service worker using only native APIs and seeing how much of the Workbox functionality I can duplicate without having to use a library. Constants and common items Individual constants for each of the caches. We store them separately so we can change the names to make cleanup easier without having to change the array we define later. js const PRECACHE = 'precache-v1'; const CONTENT = 'content-cache-v1'; const CSS = 'css-cache-v1'; const JS = 'scripts-cache-v1'; const IMAGES = 'image-cache-v1'; const FONTS = 'fonts-cache-v1'; expectedCaches is the array of cache names we expect to exists in...
Service Workers are awesome. They give you a performance boost and the capability of limited offline work without having to create apps for each platfomt that we want to use our app in. Service workers are the core of PWAs Progressive Web Applications where we take advantage of a set of web technologies to make apps that work closer to how native apps would. We'll concentrate on the service worker and in using Workbox.js and vanilla Javascript to create the service worker. I've chosen to go with Workbox first because the abbstraction makes it easier to create the type of...
Until we got CSS variables and now Custom Properties there was one way of setting custom attributes in an HTML element or directly in Javascript note the difference with CSS variables that can be later used from Javascript to change the value of the page: custom data attributes. According to the HTML standard data attributes specificationhttps://html.spec.whatwg.org/embedding-custom-non-visible-data-with-the-data--attributes > Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is not known to...
One of the biggest pain points for me has been to create horizontal menus for navigation or other data we want to display across the page. If we're using the following HTML... html Home About Projects Layout Experiments Webgl Until I saw flexbox working I used to do tables for this type of layout. It was a pain the ass and it took a lot of work to make them line up and stay in a single line multiple lines are an even worse nightmare. The CSS I need to use Flexbox is very simple and it does to things....
