One of the things I find particularly difficult when working with Youtube videos directly without lazy loading is that I don't get an image to use as a poster frame for the embedded videos. Instead of using locally hosted videos where I have more control of and that looks like this: markup I have created a video class to wrap around the iframe Youtube gives me and the result looks like this: markup There are ways to write the embed programmatically and get the embed to work they way you want but it's Javasacript I don't use Javascript for non...
I wasn't aware of Vestibular Disorders being an issue with animations on the web but it's a big part of the disabilities we need to consider when working on the web. It's important to remember that... > People with vestibular disorders have a problem with their inner ear. It affects their balance as well as their visual perception of their world around them. Sometimes the sensation lasts only a short while, but others can suffer it for years. Walking becomes a challenge and they have a constant risk of falling. Concentration is diminished leaving the sufferer unfocused and often unproductive....
In the beginning: CSS and CSS 2 Links have been on the web since the beginning as a representation of a connection to another document. In the beginning you could only change the color of the link itself and its underline. By default, text links are blue and underlined. This underlining strikes through descenders - letters that dip below the baseline, such as a lowercase j – making some links more difficult to read. with CSS level 2 we got the text-decoration keyword that allowed to change the way underlines in links and other elements looked like. With it you...
There are times when the CSS cascade becomes a pain in the ass. When we want to revert the value of a property to its default before we added any other value for the property in the current element or any ancestor up the chain we have to remember the property but also what the default value is. CSS provides several mechanisms to handle inheritance. We'll discuss several ways to work with the cascade to make it do what we need. initial The newest to me way to reset is the initial value. The initial CSS keyword sets and element...
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...
