Rather than trying to come up with new strategies for taking ebooks forward strategies we know are not going to work in the long run I've been exploring processes and technologies to turn web content into publishable content. This will definitely rehash some older posts but, I hope, will provide a fresher perspective to the technologies since it's been a few months since I last looked at them. The web is getting close to native and that might not be a bad thing In terms of performance and functionality the web has come closer and closer to native applications without...
Another idea is how to create playlists like those on Youtube but without having to code the entire interface from scratch. Dudley Storey, again, proposed a solutionhttp://thenewcode.com/792/Create-A-Simple-HTML5-Video-Playlist using CSS display: table and a little Javascript magic. I've taken the layout from Storey's article as is I'm still learning about display: table and related CSS and enhanced the Javascript with some of my working ideas. The two main constraints: - It must work without Javascript; The user must be able to view the videos when there Javascript is not available - It must work without the mouse using only keyboard THe...
One of the cool things about HTML5 video is that you can fully customize it to suit your needs and preferences. Dudley Storey has an interesting demo and tutorialhttp://thenewcode.com/479/Easy-Custom-Controls-For-HTML5-Video-With-JavaScript on how to add custom controls for a video. I will take his idea and take it in a different direction... Rather than attach the controls to the video I'll create a control-panel like interface for a video. When working in projects like this I create a minimal set of requirements. In this case the requirements are: - Video still works if Javascript is not available - Video is captioned and...
After images the biggest payloads in my pages are Youtube embedded videos and since I already lazy load images I've decided to explore how to best lazy load embedded Youtube iframes; I embed Vimeo videos far less often so I'm not going to lazy load them. I have the following requirements for any lazy loading solution: - The video must be responsive - Any external script, stylesheets and assets must be less than 5kb in size The original This is what I normally do when working with video on the web and in my Wordpress blogs. I take the iframe...
As I begin working on layouts one of the things that started to beg for attention is how to size the text properly for it to be legible online as well as being pleasant to the eye when looking at the page. The 62.5% system When I first started working on the web it was common to see the following css at the very beginning of a stylesheet: css body { font-size: 62.5%; / Other rules that apply globally / } This would set the default font size to the document to 10px. Designers would then have to adjust the...
One of the cool things we can do with Flexbox is to balance the text and images as if they were in a two-cell table. It should be possible to do so with images but instead we'll simulate two cells with the code below. I normally don't do this but in this case I will use CSS to populate the first div element with the appropriate image. markup Chrome Canary I install both Canary and Release versions to make sure that the code I'm working on works in my target browsers I install both Canary and Release versions to make...
I've been hearing about Web Assembly and its predecessor, ASM.js for a while. The idea is that we can bring C and C++ code into the web and use it directly on the browser without having plugins get in the way. This would also make it easier to port high end games and other C/C++ code to Javascript and leverage existing APIs and features Asm.js > Asm.js is a subset of JavaScript that is heavily restricted in what it can do and how it can operate. This is done so that the compiled Asm.js code can run as fast as...
What I love about Paul Lewis' Developer Diaries is that he points me to new technologies and better ways to work with web content. In this case video below he clued me into a new API: Intersection Observers. The idea behind Intersection Observers is that we don't really need to load content until it comes into the viewport it's visible in the browser's window. We can configure the action that happens when the selected object comes into view. The best example of Intersection Observers I can think of is to lazy load images only when the image in question appears...
Speech Recognition only works in Chrome and Opera. Firefox says it supports it but it doesn't work and returns a very cryptic error message. The second part of the Speech Synthesis API is recognition. Where in the prior post we used the Speech Synthesis API to have the browser talk to use when there was a problem on the form; in this post we'll use a \demo from Mozilla\demo from Mozilla to illustrate a potential use of speech recognition to make the browser change the background color of the page based on what the user speaks in to a microphone....
Accidentally I discovered a new API that makes it easier to interact with your site/app using your voice. The Speech Synthesis APIhttps://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html provide both ends of the computer conversation, the recognition to listen and the synthesis to speak. Right now I'm more interested in the synthesis part and how we can include it as additional feedback on our sites and applications as an additional cue for user interaction. Synthesis The Speech Syntthesis API gives us a way to "speak" strings of text without having to record them. These 'utterances' in API speak can be further customized. At the most basic...
