Dublin Library

The Publishing project

The difference between visual and document order

One of the things that I've always been curious about, and that didn't become an issue until I started working with accessibility, is the difference between the logical or document order of your content and the visual order it's displayed in. This is what we do when working with Media Queries to adapt layouts to different form factors, we change the visual order of the content without altering the order of the content in the document or the semanticshttp://html5doctor.com/lets-talk-about-semantics/ that we've assigned to elements in the content. !Example of an accessibility tree from Google Web Fundamentalshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/treestructure Example of an accessibility...

Font stacks and other explorations on typography on the web, Part 2

Writing Modes and World Languages Another thing that affects typography is the writing direction of your text. Either because the language requires it or because you're experimenting with new technologies like Jen Simmons does in this example from Layout Land Youtube Channelhttps://www.youtube.com/channel/UC7TizprGknbDalbHplROtag It leverages CSS Grid, Transforms, and other modern technologies to create really impressive layouts. Going back to writing modes. Different languages use different writing modes. Some things to consider: Most Latin and Cyrillic languages run the text from left to right and top to bottom Arabic and Hebrew run the text from right to left and top to...

Font stacks and other explorations on typography on the web, Part 1

I have dealt with some of these topics before in different places but now want to weave a more coherent narrative around these topics and try to find a way how to tie them together so it makes sense. What is a font-stack and why it matters It wasn't until I started reading blogs and books by Jason Pamentalhttp://rwt.io/, Bram Steinhttps://www.bramstein.com/, and Tim Brownhttp://tbrown.org/ among others that I realized that web typography is a lot more than choosing the right fonts. The font stack is the set of fonts that we use for our site or application. The browser's rendering...

Structured Metadata in HTML

This post deals mostly with Google's implementation of JSON-LD structured data. While the schema.org effort was undertaken in 2011/2012 by all major search engines at the time Google, Bing, Yahoo, and Yandex not all of them have adopted a common platform. Bing doesn't support JSON-LD, Yandex has its API behind email registration and I don't know if Yahoo has any resources to validate JSON-LD for their search engine particularly post-acquisition. So, while in theory, this should work in all search engines, only Google provides examples and freely available validation tools. Also note that this post only covers how to use...

Gutenberg: Additional Thoughts and Conclusions

Licensing the code There is also a licensing question: How is Matt Mullenweg allowing this non-GPL code into Wordpress? He has been very vigorous in the past in going after people who sold themes that used split licenses thesis, anyone? So what changed now? For the longest time Wordpress at Matt Mullenweg's insistence has not allowed dual licensed code to be published in the official Wordpress marketplaces wordpress.org/themeshttps://wordpress.org/themes/ and wordpress.org/pluginshttps://wordpress.org/plugins/. But React, at least since version 16, is released under the MIT Licensehttps://github.com/facebook/react/blob/master/LICENSE which is much more permissive license than GPL yet fully compatible with it. So what happens to...

Gutenberg: How do we work with older content?

To validate my assumptions about Gutenberg I cloned my technical blog The Publishing Projecthttps://publishing-project.rivendellweb.net/ and installed the Gutenberg plugin. My blog is not too sophisticated, it uses the two PHP functions below to customize behavior and CSS to add or modify the way things look on the blog. The first function works around a bug in some versions of Chrome where Prism, my syntax highlighter, stopped working when using the clipboard add-on that allows for one-click copy of the highlighted content. It enqueues Prism and clipboard.js and the prism.css style sheet. php // Function to add prism.css and prism.js to...

Gutenberg: A step forward or two steps back?

I got into the discussion for an issuehttps://github.com/Automattic/s/issues/1248 in the \s theme repository regarding Gutenberghttps://wordpress.org/gutenberg/ code blocks. It seems that after the first phase where they will be optional, meaning that if you don't want them or have content that relies on the traditional editor's layout you can choose not to use them or disable them via another plugin, you will be forced to use Gutenberg and its blocks regardless of what you needs are. The assumption that making it easier for everyone to create Wordpress content using Gutenberg blocks is not just misguided but dangerous too without providing an...

FFMPEG Notes and Tips

Once support for AV1 comes to FFMPEG I will recompile it to include AV1 support. It will, supposedly, provide better compression than HEVC/H265 and not be encumbered by patents to the level of H265 and H264. For an idea of the licensing nightmare HEVC has created see this articlehttps://www.theregister.co.uk/2014/10/03/hevcpatenttermsthrashedoutbutlookwhosnotatthecodecpartymicrosoftandgoogle/ in The Register There are times when I dearly wish I had a GUI to do some of the work, particularly with feature-rich applications like FFMPEGhttps://www.ffmpeg.org/ but we don't always have the chance or the choice. While there are tools like IFFMPEGhttp://www.iffmpeg.com/ they are not as comprehensive as I'd like them...

Creating an Encoder Ladder

I've always thought about the concept of an encoding ladder without really knowing what it was and why it was important. I came across the concept again a few weeks ago when researching the AV1 codec. Before jumping into details, let's define what an encoding ladder is: > Your encoding ladder is the set of encoding parameters that you use to create the various files that you deliver adaptively to your web viewers. These encoding parameters can live in your on-premise encoder, in your cloud encoder, or in your online video platform OVP. Five Signs Your Encoding Ladder May Be...

Quick Note: AOM and AV1

Something to keep an eye out for regarding royalty-free video codexes is AV1 from the Streaming Media Alliancehttps://www.streamingvideoalliance.org/. While it's still under development with a final code freeze expected by 12/31/17 it shows promise of doing better than HEVC and not having any of the royalty nightmares from HEVC patent pools. Before diving into AV1, let's take a look at the organization building it, the Alliance for Open Media. In What is AV1?http://www.streamingmedia.com/Articles/Editorial/What-Is-.../What-is-AV1-111497.aspx Jan Ozer writes: > The Alliance for Open Media was announced on September 1, 2015, with charter members Amazon, Cisco, Google, Intel Corporation, Microsoft, Mozilla, and Netflix....