I've been playing a little with Open Type font variations and their CSS equivalents for a few weeks now and I've revisited a few areas I had played with before and left because, at the time, I didn't see the need or usefulness. That said, there are projects where good typography is just as important than size, line height, and other basic elements. In this essay, we'll look at some less common features of OpenType fonts and how to use them in CSS, both the original specification using font-feature-settings and the newer version using font-variants-. We'll also look at ways...
I've done some prior work with Webpack and, while I still have my reservations, it's worth taking a look at it again from a different perspective. As I was working on my research on how to automate UI localization I came across a Webpack project and thought it'd be interesting to look at Webpack again and how to build an application around it. This is far from a perfect project. Currently, the assets are 1.7MB and I haven't figured out if I need to do further Webpack processing or if it's about how the CLDR Javascript is written. I will...
The following tweets, products of an earlier request for comments on an essay about ebooks, started an interesting line of thinking. Re: image quality, as a book publisher whose backlist is pre-digital, our problem is generally that we don’t have high-enough-res source art.— Teresa Elsey @teresaelsey December 11, 2017 <>If we're lucky we have a digital file for what appears in the original print book! Often we're scanning a print book to recreate the assets ...— Teresa Elsey @teresaelsey December 11, 2017 After the initial thought that poor archival practices can bite you hard I started thinking about a solution...
Puppeteer is a project from Chrome's Devtools team to provide a high-level way to automate running Chrome in Headless mode Chrome running without a graphical user interface. Headless browsers provide automated control of a web page in an environment similar to regular Chrome, but executed via a command-line interface or using network communication. The idea behind headless browsers like PhantomJS, Headless Chrome or He adless Firefox is to automate tasks like testing and doing screenshots of the page visited. As we go through some of these examples we'll explore the Puppeteer API in some but not all details. For a...
Adding Webpack to the mix The second example is more complex and uses Globalize, the CLDR data files, IANA timezone data and Webpack-specific tools, including a custom globalize-webpack-plugin. The first component is the package.json file that will tell NPM what packages and versions to install and what commands to run. If you're familiar with Webpack the commands in the script commands should look familiar. javascript { "private": true, "devDependencies": { "cldr-data": ">=25", "globalize": "^1.3.0", "globalize-webpack-plugin": "0.4.x", "html-webpack-plugin": "^1.1.0", "iana-tz-data": "^2017.1.0", "nopt": "^3.0.3", "webpack": "^1.9.0", "webpack-dev-server": "^1.9.0" }, "scripts": { "start": "webpack-dev-server --config webpack-config.js \ --hot --progress --colors --inline", "build": "webpack...
GLobalize is the heavy gun in the i18n world. It'll automate most of the i18n work and integrate ICU and CLDR into one application. npm install --save globalize or build from the Github development branchhttps://github.com/globalizejs/ git clone https://github.com/globalizejs/globalize.git bower install && npm install grunt If you choose to build globalize from source please make sure you run Bower install command before NPM. It took me a while to figure out that this was causing installation errors when building from GIT source. Depending on your needs it may be better to start with a pre-built distribution of the libraries. Globalize makes...
Quick and Dirty: JS Template String Literals This is a quick recap of an earlier posthttps://publishing-project.rivendellweb.net/js-template-literals/ that described Javascript Template String Literals and one way to use them to provide content translation. Andrea Giamarchi wrote an article: "Easy i18n in 10 lines of JavaScript PoChttps://codeburst.io/easy-i18n-in-10-lines-of-javascript-poc-eb9e5444d71e" that provides an idea of how to do translation using template literals. This code has been further developed in a Github Repohttps://github.com/WebReflection/i18n-utils. See the article in my bloghttps://publishing-project.rivendellweb.net/js-template-literals/ and Andrea's post for more information. Messages: Gender- and plural-capable messages The next step is to use Messageshttps://messageformat.github.io/. We use the library to separate your code from...
I've always been interested in internationalization i18n and localization l10n and how they relate to the web. My interest got picked again when I started wondering how much extra work would it be to keep a site or app in multiple languages and how much time and how many additional resources I'd need to get it done. This goes beyond translating the content; tools like Google Translate make that part easier than it used to be but also the changes and modifications that we need to do to our code to accommodate for the different languages and cultures we want...
If you've worked with Javascript for a while you've probably hit the nightmare of string concatenation and how error prone the process is and how hard it is to troubleshoot if you're not careful. javascript var sentence = 'This is a very long sentence that we want to ' + 'concatenate together.' In ES6/ES2015 there is a new way to create interpolated strings: Template String Literalshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals. In this post we'll discuss three areas: - How to build template string literals and multi-line string literals - Variable interpolation - Possible ways to use template string literals for localization None of these...
