Video web Component I've always been interested in seeing how to build a component from scratch and I've always been interested in working with video so why not work on a web component that plays back video with the HTML video tag and associated technologies. We'll talk briefly about these technologies and then we'll jump into the code using Polymer 1.0. The idea The idea is to create a web component that will look something like this. markup We also need to acommodate older browsers that, most likely, will need a Flash-based plugin fallback or links to the source videos....
variables in CSS yay? I've raved about variables in SASS and have used them extensively to create themes and write less SCSS for the same result. Now that browsers other than Firefox support the feature, has it in development Chrome or is considering implementation Edge it's time to revisit this. Another reason to take a peek at variables again is Polymer. The new styling system makes extensive use of CSS variables throughout Polymer elements. If interested in the details, check the Polymer docshttps://www.polymer-project.org/1.0/docs/devguide/styling.html But not everything is rosy as far as variables are concerned. You may be in trouble if...
> Full Disclosure: I own a Thesis Developer License and used it for several years on my personal blog. I stopped using Thesis when they moved to 2.0 with a paradigm change that I didn't like. I still have the skin I developed and may consider doing development with Thesis again in the future. I also own a license for the Genesis Framework Background A few years ago Chris Pearsonhttp://www.pearsonified.com/ the creator of the Thesis Wordpress Themehttp://diythemes.com/ became embroiled in a very public dispute with Matt Mullenweghttp://ma.tt/ and Automattic.comhttp://automattic.com, the company Mullenweg created to support Wordpress.comhttps://wordpress.comand the open source Wordpress...
Athena: Revisiting a possible digital publishing flow From a technical stand point. Web Components and the Polymer Project in particular provide a way to compose larger applications from base components and to provide flexible and powerful APIs to make our applications look great and feel powerful. What attracted me to Polymer when I first started working with the technology in 2013 was that it's flexible but still enforces discipline and pushes good coding conventions into your project. It also hides details and complexity of doing things correctly I've written before about what an online reading experience may look like in...
There are two ways to use video on the web: - You can upload your content to a hosting server like Youtube or Vimeo and let them worry about compression and delivery - Compress and upload your video files to your server and assume the cost and the consequences We will work on the second idea, hosting our own video and dealing with storage, transmission and accessibility considerations. Creating and using HTML5 video While not essential to video compression, it is important to know how to create the tags HTML5 video uses to put video on the page The Videohttp://diveintohtml5.info/video.html...
Rail: Putting the user first Paul Irishhttp://www.paulirish.com/ and Paul Lewishttps://aerotwist.com/ wrote an articlehttp://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/ for Smashing Magazine outlining a new way to look at performance by analyzing how users perceive the speed of your site. Paul Irish presented about RAIL at SFHTML5's AMP Project Presentations. He began by asking the question What is slow? - Is changing the DOM slow? - Are Javascript animations slower than CSS animations? - Is loading a script in the head of the document slow? Is it slower than loading the script before closing the body? The answer to all these questions is it depends. As...
Performance budgeting allows developers to user performance as another part of our design and builld process. There is no reason why a site should weigh in at over 2 mega bytes or take more than 10 seconds, and over 30 seconds in a mobile device, to load. In his post Performance and Designhttp://bradfrost.com/blog/post/performance-as-design/, Brad Frost writes that: > Too often, any talk of web performance quickly ventures into the land of heavy geekery. Terms like DNS lookups, Gzipping, minifying, far future expires headers, caching, ETags and more are thrown around and consequently lose the attention of most non-techy people. This...
Unless we are careful when creating them or manipulating them with Photoshop or its equivalent images can become huge very quickly. If we're not careful when saving the images we will find ourselves with images that are way larger than they need to be. Photoshop or your favorite image editor save for the web The simplest way to compress your images is to save for web. I can hear your laughter but it still holds that most of us will use Photoshop, or something similar to it, to create and manipulate images. So it makes sense to figure out how...
Tasks that minimize HTML are available for Grunthttps://github.com/gruntjs/grunt-contrib-htmlmin and Gulphttps://github.com/jonschlinkert/gulp-htmlmin and both are based on the HTML minifierhttps://github.com/kangax/html-minifier tool. | Option | Description | Default | | --- | --- | --- | | removeComments | Strip HTML commentshttp://perfectionkills.com/experimenting-with-html-minifier/removecomments | false | | removeCommentsFromCDATA | Strip HTML comments from scripts and styleshttp://perfectionkills.com/experimenting-with-html-minifier/removecommentsfromscriptsandstyles | false | | removeCDATASectionsFromCDATA | Remove CDATA sections from script and style elementshttp://perfectionkills.com/experimenting-with-html-minifier/removecdatasections | false | | collapseWhitespace | Collapse white space that contributes to text nodes in a document tree.http://perfectionkills.com/experimenting-with-html-minifier/collapsewhitespace | false | | conservativeCollapse | Always collapse to 1 space never remove it entirely. Must...
Optimizing Javascript is nothing more than eeliminating as much white space as we possibly can and, if we want to, to mangle the names of variables down to as few letters as possible. The idea is that the fewer characters the smaller the file will be and the less bandwidth it'll consume and the faster it will transfer and the quicker your scripts will become available and run. Be particularly careful when mangling variables. The mangling may have unexpected results Uglify Uglify was the first command line and build process minimizer I found for Javascript. It will both minimize and...
