If you've seen some of my earlier posts about Markdown you know that I love the flexibility of writing Markdown and then generate other formats. Using my starter kit I can generate HTML and PDF from the same Markdown source. I found out a project to convert Markdown to Google Slideshttps://www.google.com/slides/about/ using a modified Markdwon parser and the Slides APIhttps://developers.google.com/slides/ to generate complete presentations. In this essay I'll look at tree aspects of this process: How to run the tool inside a Gulp build process The md2gslides specific syntax for different types of slides The code for some of the...
Rachel Andrew's It’s more than just the wordshttps://rachelandrew.co.uk/archives/2017/01/05/its-more-than-just-the-words/ triggered a reflection that I want to share with you. Does anyone remember when the only way to get a site online was to get your school if you were so lucky to provide you space for your web presence. Then came Geocities and other 'mass' host providers and we saw the birth and proliferation of the "weird" web... either one was the place where most of us began to play with the web. !Example Geocities Pagehttps://i.kinja-img.com/gawker-media/image/upload/s--xJ-WV4WZ--/cfit,flprogressive,q80,w636/18edh1t46fw0spng.png !Example Geocities Pagehttp://blog.geocities.institute/wp-content/uploads/tumblrmlk9sgmvAC1rlkewbo112801.png !Example Geocities Pagehttp://cdn0.dailydot.com/cache/0e/e3/0ee32ed1e94e79d7d53d7be26bec7aa1.jpg Then some of us moved to private commercial hosting....
Introduction I love AMP as a technology. As restrictive as it is I think it's so for a reason. We've let the web grow fat and we need a way to work around that until technologies like Promised IndexedDB, ServiceWorkers and other client-side caching and application like functionality are fully implemented across browsers. I will never implement an AMP parser by hand and fortunately I don't have to : Automattic, the company behind wordpress.comhttps://www.wordpress.com/ and Wordpress VIPhttps://vip.wordpress.com/ has created an AMP pluginhttps://wordpress.org/plugins/amp/ that I use in all my Wordpress blogs. Once the plugin is installed and activated it will dynamically...
Although DASH is designed for both on-demand and live streaming events, I'll concentrate on on-demand content. Also important to note. Even though EME is part of DASH we will not work with EME extensions as I don't believe they should be part of the web platform. Because our ecosystem for playing video on the web has changed considerably and now smaller devices phone, tablets access our content over unreliable networks subject the way we deliver video has changed. We need to account for these elements in how we deliver our video. We'll work with two specs for streaming video for...
Introduction When HTML first introduced the video tag I was pumping my fist in joy. No more plugins to play video content. It was as simple as creating marlup like the one below to play and video in an MP4/ACC container with Egnlish and Swedish subtitles that can be changed as needed. markup But it wass never as simple as it looked. Because there was no standard video format for HTML5 video, different browsers supported different container formats and different audio and video codecs. So the video turned into something like this: markup Your browser doesn't support HTML5 video tag....
Creating printable content from the web All the stylesheets are written in SCSS and converted to CSS through the build process. In early 2015 I played with the idea of creating a custom XML vocabulary and the associated style sheets XSLT, CSS and CSS Paged Media to convert it to HTML, EPUB and PDF. It worked, the files were fairly easy to work with at least for me who created them and it was a good way to learn how to write XML schemas, XSLT style sheets and hone my skills with CSS. The repositoryhttps://github.com/caraya/xml-workflow is available While it works...
I had a very interesting conversation at my coffee shop the other day. It revolved around Wordpress and how easy it is or isn't to modify and customize. In the 10+ years I've been using it things have gotten to the point where you don't really need to know PHP as much as you used to. In this post we'll cover the following aspects of customizing a Wordpress theme and associated tools and functionality: - CSS customizations - Local changes using filters and actions - Creating child themes - Customizing templates - Using Wordpress REST API to create a completely...
Green Sock Animation Platform GSAPhttps://greensock.com/ is an animation powerhouse. It's a Javascript based library designed to animate most CSS and SVG properties. GSAP components are Taken from Getting Started with GSAPhttps://greensock.com/get-started-js: - TweenLitehttps://greensock.com/docs//HTML5/GSAP/TweenLite/: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc. - TweenMaxhttps://greensock.com/docs//HTML5/GSAP/TweenMax/: TweenLite's beefy big brother; it does everything TweenLite can do plus non-essentials like repeat,...
The Web Animation APIhttps://www.w3.org/TR/web-animations-1/ seeks to unify CSS transitions and animations with SMIL-based SVG animations under one API making it easier to implement on the browser side and easier to learn for designers and developers. The first thing to notice, this is a Javascript API that manipulates animations' timings and controls. As such we need to make sure that the browser has scripting enabled and the browser supports WAAPI. If it doesn't there's a good polyfillhttps://github.com/web-animations/web-animations-js maintained by Google that will bring older browser up to part with supporting browsers. For this example we'll brake the code into three sections,...
We've been able to animate content both in 2D and 3D for a while now. The animation effects range from the subtle UX enhancements like material design ripples for buttons and floating action buttons to full on web motion comics, animation exercises and music videos like the example below from Rachel Nabors. The simplest way of understanding an animation is that it is the change of presentational aspects of an element height, width, color, etc. over time. In short, animations are presentation, even if prior to CSS3 Transitions and Animations, they could only be achieved via JavaScript. See the Pen...
