This series of posts intends to walk you through some basic concepts, activities and shell commands to take the fear and pain away from working with a text-based interface that links directly to the Operating System. In more formal terms: > A command-line interface is a means of interacting with a computer program where the user or client issues commands to the program in the form of successive lines of text command lines. A program which handles the interface is called a command language interpreter or shell. > > Wikipediahttps://en.wikipedia.org/wiki/Command-lineinterface So what does it mean? It's like an old style...
There are times when writing the same thing over and over again gets to be really tedious. Think of populating large bulleted lists, select statements and other repetitive elements. We've been able to do this for a while using libraries... We'll look at it handlebars.js and then we'll look at using the template tag built into the HTML specification. We'll also look at why we might want to keep working with libraries to support older browsers and browsers with incomplete support. The current way: Template Libraries When I first looked at Handlebars it appeared to be too much work for...
Using CSS Variables to create themes we should be able to create more than one and then switch between them. I've experimented with using multiple roots with different classes and then use javascript to switch the class of the HTML element to match the theme. I understand the theory but I had a little bit of a hard time understanding how to add/switch a class from the HTML element. Looking at code from @justmarkuphttps://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/ articlehttps://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/ helped clarify the idea. Initially, I had decided to use buttons to make the theme switcher but a select drop down menu looks better. We...
One of the best things about CSS variables is that they allow you to create themes for your content. Reviewing CSS Variables CSS variables or, more precisely, CSS Custom properties allow you to define reusable values for elements across your stylesheet. This is particularly good for consistency and ease of change, we only need to make one change and all the places where we use the variable will be changed automatically. Variables can be global, those defined in the :root pseudo-element equivalent to the HTML document and those specific to elements in the page. Defining The Core Theme The example...
MPEG-DASH is one way to create adaptive bitstream playback, but it's not the only one. In this post, we'll explore Apple's HLS HTML Live Streaminghttps://www.wikiwand.com/en/HTTPLiveStreaming a direct competitor for MPEG-DASH and see how to build a package ready for Video On Demand. I will use FFMPEG to encode the video as required in the HLS specification. This is the same tool that I've used to create videos with other codecs. HLS Creation: Single Rendition At WWDC 2017, Apple announced support for HEVC H265, letting you work with both types of streams in the same playlist. The technologies to implement HEVC...
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...
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...
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...
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...
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...
