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...
Idea from Bram Stein's Webfont Handbookhttps://abookapart.com/products/webfont-handbook I've discussed font subsettinghttps://publishing-project.rivendellweb.net/subsetting-fonts/ regarding ebooks. This post will review how do we load multiple fonts and how we subset fonts. Loading multiple font-faces This is what my normal font loading CSS looks like. I use 5 @font-face commands to load the fonts. One for the monospace font used in code block examples and 4 for our content font: regular, bold, italics and bold italics. css / Monospaced font for code samples / @font-face { font-family: "notomono"; src: url"../fonts/notomono-regular.woff2" format"woff2", url"../fonts/notomono-regular.woff" format"woff", url"../fonts/notomono-regular.ttf" format"truetype"; font-weight: normal; font-style: normal; } / Regular font / @font-face...
Most modern libraries and frameworks have a command line interface that will make it easier to build your own applications using the particular framework. Look at Angular CLI or Polymer CLI for an idea of what I'm talking about. The idea is that we can create a tool like a Yeoman generator without having to learn the way Yeoman works. Getting started To start create a package.json file. bash npm init We'll install the application's dependencies next. Note that as of NPM 5.0 we don't need to indicate we're saving them as dependecies --save as this is assumed when you...
Text from Google's PWA Checklist used under a Creative Commons Attribution 3.0http://creativecommons.org/licenses/by/3.0/ License. Google's PWA checklisthttps://developers.google.com/web/progressive-web-apps/checklist presents both a basic and an advanced set of requirements for Progressive Web Applications. As I mentioned earlier not all these requirements are technical, some of them have to deal with the performance of your application/site and with best practices in responsive web design. I've grouped them in two categories: Basic and Advanced requirements. I will comment on individual entries as needed. Basic Requirements Serving through HTTPS in a requirement for service workers and most, if not all, modern features available in browsers. Whether...
Before we jump into the PWA checklist we'll talk about APIs we can use in PWAs to enhance performance beyond the basic functionality of PWAs we've discussed so far. Background Sync The background sync API provides tools to create one-of and periodic data synchronization after the content was initially fetched for the application. It accomplishes these tasks by adding events for the service worker and additional functions for the service worker. In the code below we register a service worker and, when we're ready, we register a sync event; The name we register here is important; we'll use it as...
