You can see it in action on its demo page or by scrolling over the iframe below:
While building scroll2play I experimented with a few really fresh features of modern web browsers. The first are viewport relative units of measure vw & vh which allowed me to scale loaded image widths and heights to the size of the viewport. The second is the window.URL.createObjectURL function which creates a URL that is a reference to locally cached blob. In my case blobs were images loaded using XMLHttpRequest. I encourage you to learn more about these new cool features.
Lastly to export a sequence of still images out of my video content I used Adobe Media Encoder CC. You can learn how this can be done by watching my short video tutorial below:
BTW: Below is the complete footage of my friends and me riding on wakeboards 😉
Over the weekend I was experimenting with a setup of MySQL connections in the Node/Express web app that I’m working on. It led me to create this super simple middleware module express-myconnection that provides a consistent API for MySQL connections during the request/response life cycle. It supports three different strategies of managing db connections: single for a singleton connection on an app instance level, pool based connections, and a new connection per each request. It’s also capable of auto releasing/closing connections if configured with either the pool or request strategy.
The conclusion of my experiments is that for now I will stick with a single. I believe this should work just fine when you think about the single-threaded nature of node. If I experience any issues switching to pool based or connections per request will be matter of setting single flag in my app configuration.
Below you can find some more info about the different strategies and how you can use them in your own projects.
single – creates a single database connection for the whole application instance. The connection is never closed. In case of a disconnection, it will try to reconnect again as described in the node-mysql docs.
pool – creates pool of connections on an app instance level, and serves a single connection from the pool per request. The connection is auto released to the pool at the response end.
request – creates new connection per each request, and automatically closes it at the response end.
Configuration is straightforward and you use it as any other middleware. The first param it accepts is a node-mysql module, second is a db options hash passed to the node-mysql module when the connection or pool is created. The third is a string defining the strategy type.
express-myconnection extends request object with the getConection(callback) function this way the connection instance can be accessed anywhere in routers during the request/response life cycle:
I just found out about this new and really hot release of Edge Reflow CC. It offers a really cool new feature: CSS Regions support. I got so excited about it that five minutes later I recorded this quick and dirty overview that goes through how you can get started with it 😉
If you want to learn more about CSS Regions or this new Reflow release, just follow these links:
In this very short video tutorial you will learn how to change language of your Creative Cloud applications. This can be very useful especially when your CC apps get installed in your native language but you want to use for example an English version instead 😉
As you probably know already, Adobe has just released a preview version of Edge Reflow CC. Just for this occasion, I recorded a series of five video tutorials that will guide you through your first steps with this awesome tool. You can watch the whole series in the embedded player below or you can view each video using the following links:
Intro – This is the introductory episode of the Getting Started With Reflow video tutorial series. It briefly covers the basics of Adobe Edge Reflow as well as navigation within the tool.
Defining Layout – This episode covers the first steps of the Getting Started with Reflow tutorial series. It shows how to use Reflow to define layout of your responsive design.
Styling Elements – This is the third episode of the Getting Started with Reflow video tutorial series. It goes over the styling capabilities of Adobe Edge Reflow.
Making Layout Responsive – This is the fourth episode of the Getting Started with Reflow video tutorial series. It covers an essential part of Reflow — making your layout responsive.
Testing Layout – This is the final episode of the Getting Started with Reflow video tutorial series. It covers techniques for testing your design on different devices using Edge Inspect and Responsive Inspector tools.
Last week I did an in-depth webinar on Edge Animate. If you are looking for a good getting started resource I believe this can be the one 😉 During this session I covered the following topics:
• Setting up a new project
• Importing existing HTML content
• Walking through the main panels and tools of Edge Animate
• Animating elements with and without the Pin tool
• Creating and understanding Symbols
• Using web fonts with Edge Animate
• Designing for flexible/responsive layouts
• Handling old unsupported browsers
• Publishing and Optimizing Edge Animate compositions for the Web and DPS (Digital Publishing Suite)