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...
> I originally wrote this post for the Web Platform Documentation Project. Since the project was halted in 2015 I decided to move the text to this blog while the companion code repositoryhttps://github.com/caraya/vtt-demos remains on Github > > Some of the links no longer work. Where possible, I've linked to archived copies on the Internet Archive WebVTT Web Video Text Tracks, formerly known as WebSRT, is a W3C community proposal for synchronized video caption playback. It is a time-indexed file format and it is referenced by HTML5 video and audio elements. As with many assistive technologies, it would be a...
When I first heard about CSS Custom Propertieshttps://www.w3.org/TR/css-variables-1/ CSS Variables one of the things I found most intriguing was the possibility of creating themes and have multiple themes available for use. In this post we'll explore some new or not so new pseudo elements that will make working with CSS variables easier, we'll explore what are CSS Custom Properties and the acompanying Javascript API for working with these new variables. > Note that, for this post, I'm using CSS custom properties and CSS variables interchangeably since both terms represent the same spec. Syntax and the :root pseudo element One of...
here's an idea... take a markdown file containing both documentation and the SCSS/CSS code it references as fenced markdown blocks and use that to generate your production code. Granted, it is not a new idea but I think it's something worth exploring. Literate Programminghttp://www.literateprogramming.com/ is a technique where the primary concern is writing the narrative of your program and embedding the code as fragments into the narrative. You then run a program WEB to both create a TeX output suitable for printing and a Pascal program ready for execution. I have seen a few examples of Literate Programming beyond Doccohttps://jashkenas.github.io/docco/...
In Javasacript we've been able to detect support for specific features almost since day one, at least since we decided that detecting browsers and equating a browser/version combination with support for a feature wasn't a good idea after all. Take the examples below used to detect if a browser suports HTML Imports, Custom Elements V1 and Shadow DOM v1. Each of the functions will return true or false based on current browser support We can then break our code based on the functions' results. javascript function supportImports { return 'import' in document.createElement'link'; } function supportsCustomElementsV1 { return 'customElements' in window;...
We're living in a progressively more diverse and more multilingual world. When the language works the same as English we have no problem. We start having issue becomes when we work with languages other than English in the same document. It gets more complicated when our primary language uses a different writing mode than the one we're used to. Think about vertical Kanji or right-to-left Hebrew or Arabic text. Why is this important? People Towards the end of his presentation at Fronteers 2016 Bruce Lawson states that lack of awareness and locally relevant content is the most common barrier to...
I've been playing with the idea of creating crazy, magazine style, layouts since I Attended Jen Simmons and Rachel Andrew workshops at An Event Apart last year. I came up with this crazy idea, build magazine layouts like those on the printed edition of Kinfolk Magazinehttps://kinfolk.com/ and see how far we can push layouts while still remaining usable at small to medium scale sites as bespoke, art directed, designs. This post is a refresher on the SCSS, CSS and Javascript I will use along with ideas of how these technologies may be used in designing print-like publications. Future posts in...
