When working in Instructional and Presentation Design I remember the way we were taught basic design, to think CRAP. CRAP is the not very polite acronym for these four basic design principles - Contrast - Repetition - Alignment - Proximity Why am I interested in these principles? Whenever working on a presentation it's important to keep people engaged and tell a good story that will engage the audience. It will also let you move the content between formats: PowerPoint to Captivate and self-paced learning and to web presentations. The Principles Now that we've looked at what the principles are and...
Looking back at WebVR I realized how important it's to keep paying attention to technologies that you're interested in or they may change from under your feet. VR and now AR is one of these areas. What it is WebXR is an evolutionary step currently under Origin Trialshttps://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md, a way to run experiments for a subset of developers using a feature. This allows for rapid iteration and quick feedback but without running the risk of the feature becoming a defacto standard, particularly when the API or feature is not finished. In this context, I'll use WebXR to mean the WebXR...
There may be times when we want to test our application with SSL or want to configure it and use it locally. Even though newer APIs whitelist localhost for development I still would rather have HTTPS/SSL enabled to make sure that other parts of my apps work as intended, particularly since most of the new web APIs require HTTPS to run. My preferred approach is to use the NODEEXTRACACERTS environment variablehttps://nodejs.org/api/cli.htmlclinodeextracacertsfile to give Node the path to a file containing one or more certificates that you want to use. The extra certificates are used, in addition, to the list of...
One of the most intriguing things I've learned about at Google I/O is the Google Maps Platformhttps://cloud.google.com/maps-platform/ gaming offerings and, among those, playable places. The base concept is this: Take Ingresshttps://www.ingress.com/ and Pokemon Gohttps://www.pokemongo.com/ and make them playable worldwide without having to collect data about the structures where you want to place markers for interaction to happen. With that base take out the possibility of playing in inappropriate places like cemeterieshttps://mashable.com/2017/02/17/cincinnati-cemetery-pokemon-go/oisI2FzmfEqC and other private properties where you have not been allowed to play, Google has done the work for us in identifying places where we can run our apps without...
Since I first saw it in AMP, I thought that link rel="canonical" was part of the AMP library. I was surprised to see that it's more than just an AMP thing. In this post, we'll discuss what are canonical links and documents, why we need to use it, and some gotchas to consider before going all in with canonical links. What it is and Why should you use them? There are times when I want to publish the same content in more than one site, like my personal blog and my employer's blog; or I may want to publish content...
These little darling units allow for some really nice effects and typographical work. We'll explore what they are and a couple effects we can use them on. vh and vw The two basic units for viewport measurement are vh and vw which track like so: - vw: 1/100th 1% viewport width - vh: 1/100th 1% viewport height The units will remain constant. 1/100th of the viewport width will remain 1/100th regardless of how wide or narrow the viewport becomes. to make an element span half the screen horizontally we could do something like this: css hero { width: 50vw; }...
One of the most frustrating things of working with Variable Fonts is that we have no real way short of bugging the font creator to provide them for you to detect what values work for each scale, how they scale and what, if any, pre-defined values are available for each font. Axis Praxishttps://www.axis-praxis.org/ is a good starting point. It provides you with a way to test and play with Variable Fonts but you get only one experiment at a time. !Axis Praxis App on Firefox Nightly 61.0ahttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/axis-praxis Axis Praxis App on Firefox Nightly 61.0a Wakamai Fonduehttps://wakamaifondue.com/ funny way of saying...
CSS Shapes are an awesome way to make our designs look less like boxes inside boxes inside boxes. It let us wrap text around an image regardless of its shape. I've written before about shapes. The posts, in reverse chronological order: - Getting fancy: Shapes and maskshttps://publishing-project.rivendellweb.net/getting-fancy-shapes-masks-and-clip-paths/ - SVG Clip Path and Shapes. An interesting alternativehttps://publishing-project.rivendellweb.net/svg-clip-path-and-shapes-an-interesting-alternative/ - CSS shapes: an update and an expansionhttps://publishing-project.rivendellweb.net/css-shapes-an-update-and-an-expansion/ - CSS regions, exclusions, shapes and new publishing paradigmshttps://publishing-project.rivendellweb.net/css-regions-exclusions-shapes-and-new-publishing-paradigms/ There are news and new tools to use with shapes and that got me excited again so here we go again. : So What Are CSS Shapes?...
We've looked at a lot of server-side tricks to reduce the page load and improve users' experience when accessing our content. Now we'll look at client-side client hints and tools to optimize our content. Client side resource hints The basic way to preload a resource is to use the element with three attributes: - rel tells the browser the relationship between the current page and the resourced linked to - href gives the location of the resource to preload - as specifies the type of content being loaded. This is necessary for content prioritization, request matching, application of correct content...
One thing we as developers tend to forget is that not all web experiences are equal. One of the positive things I've found about AMP is that it reduces the fat of your web content by reducing the number of requests, reducing the amount of CSS that you can use and, mostly, by eliminating Javascript. That's good but I don't think we need a whole new platform or library to do that. We need to be smarter about how we pack and serve our content. This is not new, some of the tools and tricks we'll discuss in this section...
