Development

Sublime Text – Search Strings and Filtering

Posted on September 10, 2014 at 3:52 pm in Blog, Development

Sublime Text Tips

Searching with Regular Expressions & Filtering Search Scope

For use in Sublime Text’s “Find In Files…” Dialog (⇧⌘F)

Find in Files Dialog Panel

Sublime Text offers many, many options for navigating within your project’s code or searching within either a single file, or the entire codebase of the project. The “Find” Menu offers over a dozen different options for Find and Replace, and depending on which you choose, there are 3 separate “Find” Dialog Panels available.

In this post, I’m going to show a few quick, introductory tips for using the “Find in Files…” Panel. Searching from this Panel will allow you to search across all files in your project, or (as we’ll cover in the second section) select a sub-set of files for a quicker search with more relevant results.

Regex Search Strings

Regular Expressions (which I’ll often refer to as “regex”) offer some incredible capabilities for searching text of any sort. While the material covered in this post is largely beginner level regex, a full introduction to Regular Expressions is far beyond the scope of a single article – I would recommend a resource such as RegexOne.com if you aren’t familiar with Regular Expressions at all.

The actual syntax of regex can vary slightly between coding languages (PHP and JavaScript for instance), but for this article’s purposes Sublime Text uses Perl Regular Expression Syntax from the Boost library. Full documentation can be found at boost.org, which you will want to reference when creating your own search expressions, or modifying and extending the examples offered below.

It’s important to note that in order to use these strings in your searches, you will need to enable Regular Expressions in search by ensuring that the “Regular expression” button (functions as a checkbox) is selected. The appearance can vary depending on the theme you are using with Sublime Text, but generally the button displays either “*” or “.*” as an icon.

Enable Regex Button
While the appearance of these Option Buttons can change depending on the theme in use, I do not recall ever seeing a Sublime Theme change the location or order of the buttons.

These are some useful templates for regex strings to use in the “Find:” field.

Search “Near”

Frequently, I end up searching for code that I have a rough memory of, but not one specific enough to quickly come up with a single, efficient thing to search for. However, I can almost always remember the general shape and structure of things well enough to come up with a pretty unique pair of things to search for that should only occur in close proximity to one another a few times throughout the project.

Variation 1 – Very Basic

// Variation 1 - Full String
\b[[term-1]]\W+(?:\w+\W+){[[1]],[[10]]}?[[term-2]]\b

// Breakdown of regex
  \b                  // Opening word boundary
          [[term-1]]      // Search Term 1
  \W+                 // Any NON-alphanumeric character (\W) with one or more repetitions (+)
  (?:                 // Open non-marking sub-expression
    \w+               // Any alphanumeric character (\w) with one or more repetitions (+)
    \W+               // Any NON-alphanumeric character (\W) with one or more repetitions (+)
  )                   // Close non-marking sub-expression
  {                   // Open definition of min/max words between search terms
          [[1]],          // minimum quantifier
          [[10]]          // maximum quantifier
  }?                  // Close definition of min/max words between search terms
          [[term-2]]      // Search Term 2
  \b                  // Closing word boundary

// NOTE: Be sure to remove the [[brackets]] when inserting
//        both your search terms and qualifiers

Returns all instances of [[term-1]] that are at least [[1]] but no more than [[10]] words away from [[term-2]] –

  • Just replace [[term-1]] and [[term-2]] with the strings you want to search for
  • [[1]] and [[10]] are quantifiers which define the minimum and maximum number of words allowed between the two search terms to return a match
    • Using [[1]] as the minimum would mean that any instances where the two words were adjacent would not be considered a match
    • You would need to use [[0]] instead
  • NOTE – Be sure to remove the brackets [[ ]] when inserting search terms and choosing quantifiers

Variation 2

// Variation 2 - Full string
\b(?:[[term-1]]\W+(?:\w+\W+){[[1]],[[10]]}?[[term-2]]|[[term-2]]\W+(?:\w+\W+){[[1]],[[10]]}?[[term-1]])\b

// Breakdown of regex
  \b                  // Opening word boundary
  (?:                 // Open non-marking sub-expression
          [[term-1]]      // Search Term 1
    \W+               // Any NON-alphanumeric character (\W) with one or more repetitions (+)
    (?:               // Open non-marking sub-expression
      \w+             // Any alphanumeric character (\w) with one or more repetitions (+)
      \W+             // Any NON-alphanumeric character (\W) with one or more repetitions (+)
    )                 // Close non-marking sub-expression
    {                 // Open definition of min/max words between search terms
          [[1]],          // Quantifier - minimum # of words between search terms
          [[10]]          // Quantifier - maximum # of words between search terms
    }?                // Close definition of min/max words between search terms
          [[term-2]]      // Search Term 2
    |                 // OR Operator
          [[term-2]]      // Search Term 2
    \W+               // Any NON-alphanumeric character (\W) with one or more repetitions (+)
    (?:               // Open non-marking sub-expression
      \w+             // Any alphanumeric character (\w) with one or more repetitions (+)
      \W+             // Any NON-alphanumeric character (\W) with one or more repetitions (+)
    )                 // Close non-marking sub-expression
    {                 // Open definition of min/max words between search terms
          [[1]],          // Quantifier - minimum # of words between search terms
          [[10]]          // Quantifier - maximum # of words between search terms
    }?                // Close definition of min/max words between search terms
          [[term-1]]      // Search Term 1
  )                   // Close non-marking sub-expression
  \b                  // Closing word boundary

// NOTE: Be sure to remove the [[brackets]] when inserting
//        both your search terms and qualifiers

Same as above, but will find the terms regardless of which order they are in –

  • Variation 1 will only return instances where [[term-1]] comes before [[term-2]]
  • Variation 2 essentially just adds an OR and then repeats the search string with the [[term-]]values flip-flopped

Variation 3

// Variation 3 - Full string
\b([[term-1]]|[[term-2]]|[[term-3]])(?:\W+\w+){[[1]],[[10]]}?\W+([[term-1]]|[[term-2]]|[[term-3]])\b

// Breakdown of regex
  \b                  // Opening word boundary
  (                   // Open group of Search Terms
          [[term-1]]      // Search Term N
    |                 // OR Operator
          [[term-2]]      // Search Term N
    |                 // OR Operator
          [[term-3]]      // Search Term N
  )                   // Close group of Search Terms
  (?:                 // Open non-marking sub-expression
    \w+               // Any alphanumeric character (\w) with one or more repetitions (+)
    \W+               // Any NON-alphanumeric character (\W) with one or more repetitions (+)
  )                   // Close non-marking sub-expression
  {                   // Open definition of min/max words between search terms
          [[1]],         // Quantifier - minimum # of words between search terms
          [[10]]         // Quantifier - maximum # of words between search terms
  }                   // Close definition of min/max words between search terms
  ?\W+                // Any NON-alphanumeric character (\W) with one or more repetitions (+)
  (                   // Open group of Search Terms
          [[term-1]]      // Search Term N
    |                 // OR Operator
          [[term-2]]      // Search Term N
    |                 // OR Operator
          [[term-3]]      // Search Term N
  )                   // Close group of Search Terms
  \b                  // Closing word boundary

// NOTE: Be sure to remove the [[brackets]] when inserting
//        both your search terms and qualifiers

Allows you to search for more than just 2 values –

  • Results will be returned if any 2 words in your list are found within the defined proximity of each other
  • This example only adds 1 extra word, but using the syntax illustrated, you could add as many extras as you’d like
    • I wouldn’t recommend going much higher though – for both performance and logic reasons 1
  • As compared to Variation 2 only the list of search terms gets repeated, as opposed to the entire set of search parameters, so that’s better-ish
  • It occurs to me that I’m not 100% certain what will happen if all three search terms are found within the defined range of proximity
    • My guess though, would be that it shouldn’t break anything too thoroughly, you would just end up with a set of results that included each combination listed as a separate match, even though they all pointed back to the same chunk of code 2

I’d be willing to bet that there’s a much more succinct way of accomplishing all this, but these ones work, and I’m still very much in the early stages of learning regex – That being said, if you have any suggestions for improving those strings, I’d love to hear them.


 

Include/Exclude Filters

Filter files and folders to search

These are some useful strings to use in the “Where:” field to make your search run faster, and avoid cluttering your results with, say, the entirety of jQuery in it’s minified format, or all of the libraries you’re pulling in with npm/bower/etc.

Include File Types

*.js,*.tpl.html

Say you’re looking for a style attribute that’s getting added dynamically and throwing off your selectors, because it gets added as an inline style instead of toggling a class – based off of that you know that it’s almost certainly in either a full-blown .JS file, or a script tag somewhere – Combine that with the knowledge that even though our (hypothetical) values are used pretty commonly throughout the CSS, there are probably only a handful of instances that it occurs in the JS. So you could exclude all the CSS files ( -*.css ) from your search and hopefully trim down the number of search results, keeping them more focused (and more likely to be relevant) as well as reducing the number of files being searched by a little bit. However, excluding CSS explicitly will still search every single file of any other file-type.

Exclude Minified Files

-*.min.css,-*.min.js

-OR-

-*.min.*

Exclude Component Libraries

-*/bower_components/*,-*/npm-modules/*

Because there’s (usually) a lot of them, and they’re long but minified – so you still end up with the full code being considered as “context” for your search results. Also, you shouldn’t be editing them anyway.


Conclusion

Although we really just scratched the surface of what Sublime Text and Regular Expressions can do, I hope this quick overview of some of Sublime Text’s more advanced searching capabilities has given you some ideas of how to search more efficiently based on your own preferences, or the needs of a specific project.


 

Tangents and non sequiturs
1

I’m sure it affects overall search performance, and in general, adding more possibilities to match against will result in more matches being returned – which is good, I suppose, if you’ve run a more limited search already and the code you’re hoping for is not showing up – but if you get back a huge list of questionable relevance then that defeats the entire purpose of searching in the first place.

2

So, actually, I bet you could probably write a search with enough parameters, and a large enough range of proximity that (depending on your system specs and the size of your code base) it would in fact hang or crash Sublime Text – but I think you’d have to be trying fairly deliberately to do that

Debugging on Mobile with Weinre

Posted on August 27, 2014 at 10:54 am in Blog, Development

The emulation tools in Google Chrome’s Dev Tools are a great way to do a first round check of your Javascript app’s behavior on tablet and phone. However, there is no substitution for actually testing on the device. Between all the different iOS and Android configurations, not to mention the cloud of other manufacturers and OSes, you’re bound to discover some peculiar behavior that only occurs on the device. What to do?

There are different ways you can plug in and hook up your devices for debugging on your computer. However, iOS has its way, Android has its way, and this approach is as fragmented as the device market. Managing all that is a chore, and often hard to setup. One nice tool that exists for debugging Javascript and HTML cross platforms is weinre. Weinre is a proxy server of sorts that allows you to do remote debugging of your device. You can see the DOM, console output, and even execute Javascript commands. This makes debugging that mysterious mobile bug a bit easier.

Here’s the general steps to setting up:

  1. Install weinre. It’s a server that runs on your dev machine.
  2. Start it up via the command line. Make sure to pick a port for it to run on that doesn’t conflict with other processes running. It defaults to port 8080. If you want to alter the port it is running on, you can use the following command: weinre --boundHost -all- --debug true --httpPort 8081
  3. Put a script embed in your app or page that brings in the script from the server, using the server’s IP address: <script src="http://127.0.0.1:8081/target/target-script-min.js#anonymous"></script>
  4. Visit the server in a browser on your dev machine to make sure it’s running: http://127.0.0.1:8081, for example.
  5. Then when you visit the app on your device, it should show up as a connected user on the weinre server and you can then access Javascript debugging tools.

I found this how-to guide from Nokia to be very valuable in setting up weinre. It has some more in-depth instructions to help get you on your way past the difficulties of debugging on your device and take some of the sting out of mobile development.

Extract: Project Parfait is Now an Official Part of Creative Cloud

A few months ago, in April of this year, Adobe unveiled an experiment called Project Parfait – a web-based service that allows you to upload and view Photoshop Files with a fantastic set of tools for inspecting elements and extracting assets. If you haven’t gotten to check it out yet, I wrote a full Overview and Introduction to Project Parfait which covers its core features and usage in detail.

In the months that Project Parfait has been available, it’s become a fairly regular part of my workflow and is usually the first thing I open to check out new comps. In short, I’ve gotten more attached to it than is generally wise with Betas and experimental projects.

Thankfully, as of today, Project Parfait is becoming an official part of Adobe’s Creative Cloud and will bring it’s full functionality to Creative Cloud Files as a feature called Extract.

Extract in CC

Updates

Since my initial article Project Parfait/Extract has gotten a couple more neat little features added. Besides a lot of little details and refinements, there are a few things worth calling out.

Layer Comps

Project Parfait/Extract will recognize Layer Comps, and allow you select available views of your PSD.

Layer Comps

If you upload a file with Layer Comps defined, you will notice that an extra dropdown selector appears to the left of the size and scaling information just above the viewing area. This will allow you to select any existing Layer Comps and update the view accordingly.

Layer Comp Selector Dropdown

The dropdown selector will only appear for files that have Layer Comps included when they are uploaded, so you will need to make sure that’s done from within Photoshop beforehand.

For a quick intro to creating and using Layer Comps, try this recent video tutorial from Adobe.

Keyboard Shortcuts

There has also been a small set of Keyboard Shortcuts implemented, which open up some handy ways of navigating between elements, allow you to easily zoom in and out, and enable a pixel-level eyedropper tool for extracting very specific color values.

Extract Keyboard Shortcuts

Using Extract in Creative Cloud

To use Extract:

  • Login to Adobe’s Creative Cloud.
  • Go to the Files section and upload a PSD.
  • View the PSD and click on the “Extract” tab.

You should see a familiar interface almost identical to Project Parfait, but, running inside Creative Cloud. From this view, you can also share the PSD with any email address. The recipient of the PSD will not need to be an Adobe Creative Cloud subscriber.

Sharing Functionality

Up until now, even though Project Parfait has been using your regular Adobe ID for login and access, it has not been possible to directly access files in your Creative Cloud storage, and files uploaded to Project Parfait have not been available from within Creative Cloud.

With the direct integration into Creative Cloud as Extract, you should now be able to directly open any PSDs in your storage, or that have been shared with you.

It was also not previously possible to share files uploaded to Project Parfait, without sending the file separately and everyone uploading it to their individual account. With Extract becoming a part of Creative Cloud, all the CC sharing functionality should become available.

One very nice little feature is that if you share a PSD with someone, they will be able to access the Extract features directly from the link, regardless of whether or not they have a Creative Cloud account.

Wrap Up

All in all, it looks like Project Parfait should be making it’s move into the Creative Cloud as Extract in pretty much the same state as it exists now. There should be some nice crossover features added as the Creative Cloud ecosystem continues to grow. According to the current plans, as Project Parfait becomes Extract it should remain more or less complete. In what I’ve seen about the changes, it has been called out that:

  • Users will not lose any functionality from Project Parfait and they will be able to share these PSDs with team members.
  • The service will remain available to all users of Creative Cloud including the free tier of users.

As I understand it, the full features of Project Parfait should be available today from within Creative Cloud as Extract. The Project Parfait service is slated to remain active until sometime in October, so that there’s time to migrate over any files, but after that it will only be available from within Creative Cloud as Extract.

Recently, I was tasked with building a video player that would play live streams via IP Multicast on a supported network and automagically switch to Unicast on an unsupported network. Problem is, with IP Multicast the clients will make a connection and just wait around for data without bombing out. This is because the clients are connected to the IP Multicast address space via their network hardware and not a server endpoint in many other types of streaming.

In the past, this type of configuration might be implemented through a connection timeout in the video player logic. However, I wanted a seamless and immediate way to fall back without making the user have to wait. Enter Apache mod_rewrite.

The general workflow I wanted to follow was this:

  1. The end user hits the video player page on the Apache server
  2. The video player seamlessly and immediately point itself at the right stream.
  3. Everyone’s happy

I accomplished the above with a little mod_rewrite magic in my Apache config.

First, I needed to make sure clients on specific subnets would play back the live stream using Unicast. Second, I needed to properly redirect all other clients to the live stream using IP Multicast. Also, I needed to make sure that VOD requests would be ignored.

Here’s a gist of my rewrites along with some commentary.

Enjoy!

CSS Filters – Current Implementation and usage

Posted on July 16, 2014 at 11:32 am in Blog, Development

OVERVIEW

Almost two years ago, CSS filters were introduced and available as a preview in advance browser versions, such as Chrome Canary. Even using the latest builds, it was still necessary to enable extra flags for the features to work as concisely defined filters. SVG filter effects and Filter Elements can be used to produce similar results (-webkit-filter effects are essentially shorthand presets built using Filter Elements), but for the scope of this article we’ll stay focused on the current -webkit-filter options.

AVAILABLE FILTERS

I’ve created interactive demos of the current filter effects so that you can see them in action and get an idea of the values each one uses. To control the filters, simply drag the slider under each example image. The filter effect, along with the value it’s using, will update in realtime.

In order to play nicely with the data binding used to make things update in realtime, these previews currently only support the implementation for WebKit browsers (Safari, Chrome, Opera) at the moment.

GRAYSCALE

See the Pen CSS Filter – Grayscale by Jordan Pagels (@designerJordan) on CodePen.

SEPIA

See the Pen CSS Filter - Sepia by Jordan Pagels (@designerJordan) on CodePen.

SATURATE

See the Pen CSS Filter - Saturate by Jordan Pagels (@designerJordan) on CodePen.

HUE-ROTATE

See the Pen CSS Filter - Hue-Rotate by Jordan Pagels (@designerJordan) on CodePen.

INVERT

See the Pen CSS Filter - Invert by Jordan Pagels (@designerJordan) on CodePen.

OPACITY

See the Pen CSS Filter - Opacity by Jordan Pagels (@designerJordan) on CodePen.

BRIGHTNESS

See the Pen CSS Filter - Brightness by Jordan Pagels (@designerJordan) on CodePen.

CONTRAST

See the Pen CSS Filter - Contrast by Jordan Pagels (@designerJordan) on CodePen.

BLUR

See the Pen CSS Filter - Blur by Jordan Pagels (@designerJordan) on CodePen.

DROP-SHADOW

See the Pen CSS Filter - Drop-Shadow by Jordan Pagels (@designerJordan) on CodePen.

BROWSER SUPPORT

Browser implementation is still far from standard, but WebKit browsers (Chrome, Safari, Opera) support prefixed filter styles in all current mainstream versions. There are possibilities for implementation in Firefox and IE as well, but the approach is not nearly as straightforward, and there’s a fair bit more code involved. To achieve the same effect across these browsers, you’ll need to use SVG Filters or Filter Element syntax.

It is worth noting that this is entirely different than the Microsoft IE -ms-filter property in terms of implementation and browser handling.

CSS Filter Effects are supported in recent versions of Chrome (18.0+), OSX Safari (6.0+), Opera (15.0+), iOS Safari (6.0–6.1+), and Android Browser (4.4+) as reported by caniuse.com. Firefox is listed as offering Partial Support since version 3.6, although that is using the SVG url() syntax.

IE is listed as not supporting CSS Filter Effects, even into 11.0 - although this MSDN Article from 2011 previews SVG filter implementation that seems to have been slated for IE10.

IMPLEMENTATION

The CSS Filter Effects, as addressed in the examples, are currently implemented in WebKit browsers only and use the following syntax style:

-webkit-filter: [filter name](value);
filter: [filter name](value);

Filter Effects using an SVG filter with the url() syntax are not quite so straightforward and require a separate <svg> element (either in an external file, or included in the page’s HTML) in order to work. The Mozilla Developer Network provides a great article on Applying SVG effects to HTML content.

WRAP UP

Given the wide variance in implementation and guaranteed support, CSS filters (and their cousins) are still a ways from being advisable for any key functionality of a site. That being said, caniuse.com currently lists browser support at almost 65% (includes partial support). With this in mind, CSS filters create some very interesting possibilities for Progressive Enhancement of carefully considered elements.

I’ve been asked a lot of questions and have done a lot of work recently around security hardening for HTTP Streaming with Adobe Media Server (AMS) and Apache. Content protection and sever security and hardening is an evolving beast and the best thing to do is to keep in mind what needs to be secure and how it can possibly be circumvented. However, there’s some basic things to know and a couple tips I can shed some light on within the span of a blog post.

First, with HTTP streaming I think of security in three major categories:

  1. Server security
  2. Content protection over the wire
  3. Content protection while at rest and preventing unauthorized access

Server Security

When considering the origin of your content, you need to follow the general server hardening and security processes:

  • Decreasing access to root level accounts.
  • Protecting authentication info such as passwords and certs. Changing them from time to time as well.
  • Keeping the Operating System and server applications patched.
  • Using firewalls to decrease the network attack surface of your server.
  • Auditing the server files and logs and using some IDS systems.
  • The list goes on…

After you’ve done due diligence when it comes to your server, then next you need to concern yourself with AMS and Apache as well. Here’s a couple tips to keep in mind:

Adobe Media Server

Apache Server

The version of Apache bundled with AMS is 2.2.x. Unfortunately, due to the modules needed for HTTP Streaming you can’t upgrade to a newer version of Apache such as 2.4. However, you can lock 2.2 down as far as you need. Here’s some tips on that:

AMS and Apache – Ongoing

A really good way to see how well your lockdown efforts are going is to run a vulnerability scanner against your server. This not only will give you an idea of what’s still exposed, but it’s also a good way to check your server from time to time as new vulnerabilities are found. Here’s a scanner that I like using: http://go.beyondtrust.com/community

Content Protection Over the Wire

Now that your server is secure, you need to figure out how to protect your content as it traverses the network between your AMS/Apache origin and the end-user’s video player. SSL is always an option, but did you know that AMS has some built-in DRM protection that doesn’t need to use SSL?

Content Protection While at Rest and Preventing Unauthorized Access

How do we prevent unauthorized access and protect the content that the end user has streamed to their local machine?

Prevent Unauthorized Access

There’s a number of things you can do to prevent unauthorized access. Without going too far into implementation details, this step requires:

  1. Some co-ordination with the application developers on your team to basically create a binding between the video player and the wrapping application. For instance, the video player would require some kind of token to be passed in before it will play back content. This token can be anything from a shared secret to some information acquired through a valid SSO sign-on.
  2. If you’re using PHDS, once the player is bound to your system, then you can leverage Protected SWF Verification for PHDS to make sure only your player can play back the PHDS content: http://www.adobe.com/devnet/adobe-media-server/articles/swf-verification-protected-http-dynamic-streaming.html
  3. If you’re using HLS, it’s much trickier and not quite as all encompassing, but someting you might keep in mind is locking down requests for content through token rewrites that have a short expiration ttl: https://code.google.com/p/mod-auth-token/

Content Protection While at Rest

This one’s easy…for now. If you use PHDS or PHLS as mentioned in the previous section, the data itself is protect with DRM. Basically, a simple AMS bundled version of Adobe Access DRM. :)

Closing thoughts

Don’t consider this article and the referenced links as an end-all be all to HTTP Streaming Security with AMS/Apache. It’s just a quick summary of some of the things to consider.

In my consulting experience, I’ve had a wide variety of consulting clients each with varying needs for security. Some implement everything, some a subset and most of the time there’s custom development, consulting, and testing involved. Also, security is a trade-off, the more secure you make something the less functionality there will be for you to leverage. So, implement your security while keeping your required functionality in mind. And test, Test, TEST your configurations against your production use cases.

Hope you enjoyed the read. If you’re ever in need of advice or help with implementing your HTTP Streaming Security, feel free to drop us a line: http://www.realeyes.com/contact/

CSS SHAPES

INTRO

Back in 2012, Adobe proposed CSS Shapes as a new feature to the Official Specifications of The Internet W3C. Earlier this spring, a portion of the proposed features reached Candidate Recommendation status. While that is still a far cry from becoming official by any definition, it is a very encouraging step. Some elements of the functionality are also becoming available to experiment with in the “bleeding edge” versions of major browsers, Chrome Canary, and the Webkit Nightly Builds.

CodePen Example

An example on CodePen by Adobe Web Platform

WHAT IT IS

CSS Shapes are an attempt to bring some of the benefits of working with type and layout in print to the modern web. Module 1 focuses primarily on how text wraps around a shape (the shape-outside property).

WHAT IT ISN’T

Despite both being aspects of CSS that relate to Shapes, CSS Shapes discussed in this article are actually quite different from the very cool little examples showcased at CSS-Tricks’ The Shapes of CSS.

Those shapes are created almost entirely through the clever manipulation of individual border and border-radius properties, with the main intent of rendering shapes in the browser with pure CSS code.

The CSS Shapes defined in the spec are in fact full geometric shapes:

inset() = inset( <shape-arg>{1,4} [round <border-radius>]? )

circle() = circle( [<shape-radius>]? [at <position>]? )

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

Created with the main intention of wrapping and flowing text around and through the elements of a page, while providing the flexibility required to responsively accomodate the ever-growing ecosystem of devices and screen resolutions being used today.

The most concise explanation I’ve found is these illustrations from the current W3C Document

normal-wrap

margin-box-wrap

AVAILABILITY

Chrome Canary

  • Open up Chrome Canary and type “chrome://flags” into the address bar
  • You should see a large list of experimental features, with the option to Enable or Disable each one
    • Be very careful on this page because you actually can break things here
  • Find the entry titled “Enable experimental Web Platform features.” and set it to Enabled
  • Restart Canary and the following properties should be available to use:
    • shape-image-threshold: 0;
    • shape-margin: 0px;
    • shape-outside: none;

Webkit Nightly

  • As of the current version at the time of writing (r168728) some CSS Shapes are available by default, in the standard download:
    • -webkit-shape-image-threshold: 0;
    • -webkit-shape-margin: 0px;
    • -webkit-shape-outside: none;

Once you’re set up with a browser that supports these experimental features, you can checkout the Web Platform Live Example of shape-outside and instead of layout that everyone else sees,

Without Shapesyou should see that block of text fit nicely between the two triangles.

With Shapes

COMING SOON – BUT NOT YET

It will probably still be quite a while before these features will reach a level of implementation and adoption that they can actually be used, but it’s always good to keep an eye on what’s coming.

Here are some great resources for learning more, and seeing what sort of experiments people are trying already:

RESOURCES

DIRECTLY RELATED

LOOSELY RELATED

Last month we had the pleasure of attending the NAB 2014 conference in Las Vegas, Nevada.

I even came out of Lost Wages a little ahead, so for now I can still call it Las Vegas. We’ll just have to wait until my next visit to see what I call it after I leave.

Since this was my first time in attendance, I wanted to see as much as I possibly could without saturating my brain with products and information. When you’re at a conference with 90,000+ attendees and hundreds of exhibitors, it’s easy to get overwhelmed. With that in mind, I made a little mental agenda to focus on relevance versus irrelevance.

What’s really cool about working for a small software development, consulting, training, and integration company like RealEyes, is that we get to deal firsthand with many real world use cases that are never the same. It keeps all of us on our toes and helps us be more knowledgeable in our niche.

Now back to NAB. To anyone who is reading this blog post and has been there before or is familiar with the conference overall knows that it’s the big leagues. Companies from all over the world that either already have an impact or are trying to have an impact are there. From hardware to software and everything in between, they’re there.

One thing I had never considered was how many moving parts go into broadcasting. It’s insane. Since my primary focus deals in streaming solutions, encoding and web collaboration, I never think about what it takes to produce the content, just how to get it out there and deliver it successfully. And since I don’t think we’re going to be delving into video and/or broadcast production any time soon (or are we?), we have to be resourceful with best practices for content delivery.

Varnish Plus is what we feel will offer the proverbial, “icing on the cake” for our end-to-end solution approach. What is it exactly? It’s an HTTP accelerator. Simply put, it’s like supercharging your car. While it’s already been established as the web accelerator of choice in Europe, we are excited to be the premiere Varnish Plus resale, implementation and training partner here in the United States.

Please contact us directly to find out how you can supercharge your content delivery.

Adobe Experiment “Project Parfait”

Posted on April 30, 2014 at 5:39 pm in Blog, Development

Project Parfait

Photoshop has been popular for building pixel-perfect web-design comps for many years now, and has had at least some level of support intended specifically for that purpose for just about as long. With the end of development on Fireworks, and the introduction of the Edge line of products, Adobe has been working on integrating Photoshop more and more seamlessly with tools that are built for developers.

Last week Adobe unveiled it’s latest experiment to the public, which for the time being, is called Project Parfait.

Project Parfait Screenshot

Overview

Project Parfait is a new experiment from Adobe that’s currently online and free to try out and use. The general idea of Project Parfait, is that it is an online service which will allow you to log in with your Adobe ID, and upload a PSD comp of an app or website – without any extra formatting, organizing, or labelling – and it will then display in your browser almost exactly as it did in Photoshop*.

* All the files I’ve experimented with so far have rendered exactly as I’d expected them to, but the current FAQ does call out that there may be occasional discrepancies. 

Instead of any elements or layers being editable, however, clicking on any of them will display all sorts of incredibly useful information specific to your selected element. Selecting two elements at the same time will give you an exact pixel measurement between those two items.

The information panel will also display some overall specs of the file which have traditionally been a bit more difficult to compile in Photoshop than one would like.

Highlights

Fonts

Project Parfait - Fonts

My personal favorite so far, is the complete list of all fonts and font styles used in the file. A complex design comp can easily contain well over a hundred layers, nested, and hidden, and generally difficult to assess all at once, even when filtering for certain types. Compiling a list of all the fonts used, and at what weights and styles, can be tedious even with a PSD created yourself. If you’re working with a PSD provided by another designer, it can border on maddening. While there are plugins to address this issue, I haven’t been completely satisfied with the ones I’ve tried. Project Parfait though does a grand job.

Project Parfait - Fonts

If you click on and select any text layer, you will be able to view the exact properties of that instance, as well as get the CSS styling rules, in a remarkably clean, and a la carte format.

Colors

Another very useful bit of information that Project Parfait provides as soon as you load a file, is a clear list of colors used in the file. Any element or layer with a solid fill color will be sampled for the list of swatches, while image layers will not. This gives you an immediate overview of the site’s palette.

Project Parfait - Colors

Clicking on an individual swatch will give you the numeric color values, available in RGB, Hex, or HSL. As well as place marker overlays on the comp to point out each instance of that specific color.

Project Parfait - Colors

One great use for this, is tightening up your color palette, as it allows you to be much more conscious of the exact color values implemented. In this instance, I have several grey values that are only a few tics away from each other, and can probably be pulled into one single value for a more defined overall palette.

As with the text elements, directly selecting any of these elements will provide you with a clean, a la carte list of CSS rules, which you can drop directly into your style sheet. Transparent layers are even accounted for, and will provide CSS using RGBA values, as opposed to HEX values.

Gradients

This functionality is more or less identical to the color functionality discussed above, except that it will identify elements with a gradient fill.

Project Parfait - Gradients

The major difference is in the CSS generated. Even simple gradients can require some fairly sizeable chunks of code to be rendered with CSS, and while using any number of available CSS3 gradient generators will provide that code, they require you to recreate the specific values used in your comp in order to render your gradient correctly. Project Parfait will generate that CSS directly from your PSD, to save you that step and cut down on the chances of code straying from your design.

Measurements

Project Parfait - Measurements

Opinion seems a bit divided on this feature in the Project Parfait forums so far, but I personally would call this out as my other favorite feature to be released so far. Clicking to select any element in your document will display clear and prominent pixel dimensions for both the width and heighth and the xy position of that element. This same information is readily available in Photoshop, but the ease of selecting elements and the prominence with which the information is displayed are extra convenient.

Project Parfait - Measurements

The magic happens (for me at least), once you already have one element selected, and then shift-click to select a second element. Regardless of the two element’s placement, shape, or (lack of) alignment with one another, you get exact pixel dimensions of their offset from one another. You don’t have to add any guides, zoom in to verify that your ruler is set precisely, or worry about any of the little quirks involved with using the Photoshop Ruler Tool. It’s even easy to determine and double-check the exact alignment of text elements within their containers.

Exporting Image Assets

By default, when you load up Project Parfait, you will see the Styles Tab on the right-hand side of the screen, which contains everything discussed thus far. There are also tabs titled “Layers” and “Assets” which can be explored. The Layers Tab functions more or less the way the Layers Panel in Photoshop does. When you first open a file, the visibility of the layers will be in the same state they were when you saved the PSD. Using the familiar eye icon you can toggle the visibility of any layers or layer groups that contain different pages or states of the design.

Project Parfait - Layers

The two main differences in Project Parfait, are a Reset Layers button, which will set all the layers back to the state they were in when you opened the file, and a down arrow visible on the right side of selected layer’s rows in the list.

Project Parfait - Extract

This relatively inconspicuous little down arrow will in fact allow you to extract and generate an image element in a variety of formats. In essence, this is a slickly streamlined workflow replacement for selecting an element’s layer, hiding all other layers, trimming transparent pixels, and then starting the “Save For Web and Devices” dialog.

Closing thoughts and Caveats

Despite it’s still-very-experimental and very-much-in-development status, Project Parfait offers some incredibly useful little tools and timesavers to anyone working from PSD comps. This seems to be an incredibly well-formed example of the capabilities being given to JavaScript as a fully-implemented language for Adobe Extensions and Scripting.

It is well worth giving the official FAQ at least a quick read to see the latest status of the project, and what features are currently in development.

360Flex 2014 – Why you should register

Posted on April 21, 2014 at 12:23 pm in Blog, Development, Training

Here’s a number of reasons of why you should consider registering for 360Flex this year:

  1. There will be a series of mobile development sessions and labs give by our very own Jun Heider and OmPrakash Muppirala to help you build applications for both Android and iOS devices.
  2. Alex Harui will be there to talk about FlexJS which allows you to leverage your existing Flex skills to build JavaScript based applications.
  3. Ted Patrick will be there to help you make the move from Flex to Web Standards if that is how you choose to go.
  4. As always, we have multiple sessions of Michael Labriola. He’s always got something slick up his sleeve to discuss.
  5. There’s a number of other great sessions and speakers as well.

So what are you waiting for? Register and experience the awesome this May!