With O'Reilly's Fluent Conference right around the corner, I felt it was a good time to catchup with Peter Cooper who helps chair the event. In case you didn't know, Fluent is one of the premier developer events in the world, bringing together top speakers like Brendan Eich, Paul Irish, Lea Verou, Burke Holland and many others to delve out amazing presentations on modern web development.

Peter himself is a household name built on his contributions in the Rails world and his awesome set of email newsletters (really worth checking out!).

I got an opportunity to ask him a few questions about managing such a huge conference and the state of the Web Platform. Let's check it out.

Let's start off with an intro. Mind telling us a bit about yourself, Peter?

Hi Rey! I'm Peter Cooper, general Internet busy body, Reddit and YouTube addict, and perhaps best known for my work in publishing a variety of newsletters for programmers, like JavaScript Weekly and HTML5 Weekly. I live in the UK but ultimately spend the majority of my time living on the Internet.

One of your big yearly initiatives is helping drive O'Reilly's Fluent Conference. Why is this such an important thing for you and the developer community?

On the surface, I'm an unusual person to chair an event like Fluent. I tend not to go to many conferences as they aren't a natural fit for the hermit-like way I like to learn and network. I'm about as introverted as it gets. When the opportunity came up, however, I simply had to get involved for the learning experience and to help flex my social muscles a bit.

Ultimately I've got to learn a lot about conference organization, what makes attendees tick, and what makes an event work (or not). One thing I've learned is that for most conference attendees, events like Fluent help make the amorphous online “communities” around languages and technologies “real.” People get to meet folks they admire, whose Twitter accounts they follow, and whose tools and code they use. Most attendees also devote themselves to getting involved with on-site events, interacting with speakers, and learning in a way that so few people can do purely with blog posts or online video.

Real life events only seem to be becoming more popular in the developer community, and in an increasing number of forms, both formal and informal. Anyone who can provide the right people, the right venues, and the right activities to the right attendee base is going to be successful.

Conferences are always positioned as an opportunity to learn something new. From an educational standpoint, what are the challenges you face with a conference of this size for ensuring you're getting relevant and up-to-date presentations in place?

Our biggest challenge is timing. Being a company of a certain size, O'Reilly has a variety of processes in place to make sure that the organization of their conferences runs smoothly. Part of this means we have to run our CFP (Call For Speakers) several months in advance and this can be problematic in a fast moving area like Web development as some speakers aren't allowed to disclose things they're working on yet or they might not know when certain features will be publicly usable or not (Web Components and Polymer are key examples this year).

Big conferences can be overwhelming to attendees. What have you found to be the best way for someone to learn something new while they're at an event?

It's hard to say, as people seem to learn in such different ways. To a certain extent, I think attendees self select themselves to the variety of ways we offer up content. Rather than offer fixed, three hour workshops and 50 minute talks this year, we've opened up the format a bit with a variety of shorter and longer workshops, shorter talks, and various on-site events and meet-ups, giving people a better chance of finding the approaches that work for them.

Ultimately, though, I don't think the key point of conferences is to formally learn things, although that's a good point to lean on, particularly when convincing bosses to let you attend! Being inspired, getting a feel for what's going on in the field, and networking are all more important and likely to have a bigger effect on attendees' careers, and we aim to provide all three.

Along the lines of education, developer tooling and workflow has evolved quite a bit and continues to change frequently with new tools sprouting up daily. What can developers do to stay on top of this evolution and not get left behind?

As someone who publishes a variety of developer newsletters, I should be quick to recommend weekly newsletters as a great way to stay up to date, but really there are a ton of ways from following interesting people on Twitter and subscribing to interesting publications (like yours!) through to podcasts and YouTube channels.

Perhaps the best mechanism for keeping up to date in a broad sense nowadays is Twitter. Whereas publications and newsletters might have their own agendas or biases, following a wide variety of people in your industry on Twitter is a guaranteed way to get a feel for what public opinion is, what tools people are using, and what's going on. It takes time and a lot of patience to use Twitter properly, but it can be very rewarding, especially when you participate yourself.

With modern browsers becoming more powerful, what are the new technologies you see that will have a dramatic impact on how we build web applications in the future (for example, Polymer, Web RTC)?

The technologies behind Web Components are looking very promising as a way to give developers more direct power over what their pages do without resorting to extraneous JavaScript and cruft, but it's all still a good way away from being broadly useful without using polyfills or frameworks like Polymer.

A variety of multimedia and graphical APIs seem to be having a bigger impact in the mid-term, including WebGL (now finally supported by all major desktop browsers except Safari), HTML5 Canvas, the video and audio tags, and WebRTC's getUserMedia. These are having a huge impact in terms of taking over in a variety of popular areas that Flash has been the dominant technology, for the past decade.

What remains to be seen (and enjoyed!) is how developers will tie all of these technologies together because in terms of commercial examples, we've mostly been seeing reproductions of Flash-level approaches so far, but the widespread proliferation and availability of all of the exciting Web Platform APIs under development is going to open up a wide variety of new opportunities.

Both of the frameworks I've mentioned above have opinionated workflows. Shouldn't some of their patterns and components just be a part of the Web Platform itself so we can have some level of standardization?

You could argue that many libraries and frameworks are essentially large-scale ‘polyfills' for gaps in the Web Platform, but I personally believe it's necessary for them to fight for survival and thrive as external, third party systems because that's the only way good ideas get proven and bad ideas die. I certainly don't think bodies like the W3C and WHATWG should be the principal drivers of innovation on the Web, instead of responding to and augmenting the innovation already taking place.

There's been a lot of debate about whether we need JavaScript libraries or not. Are we at a point, especially with regards to browsers nuances, where plain old JavaScript can solve everything without the use of libraries?

While it's possible to accomplish many of the basic features jQuery provides by leaning on JavaScript and the increasingly-standardized DOM APIs, jQuery still does a lot to smooth the process of dealing with multiple browsers on multiple platforms. We're certainly not at a stage where it's trivial to have a broad level of support by using entirely standardized, vanilla JavaScript approaches.

In terms of the Web Platform, it seems we can ask a similar question about standards support. We're still being held back in some respects by browser fragmentation, especially in mobile. How long do you see this persisting, requiring continued use of polyfills and shims? Should we just forget about older browsers?

One of the biggest effects on rolling out new technologies has come along with browsers that automatically update, a feature now mainstream in Chrome, Firefox, and Internet Explorer. People are stuck on older browsers for a rapidly decreasing amount of time, although there'll still be an un-shiftable percentage of hold-outs, particularly those forced to be on older versions under enterprise policies or due to aging hardware.

Polyfills are a great way around the problems on modern browsers, since even relatively simple things like strong JavaScript support and HTML5 Canvas can be used to patch over the lack of support of other things, but it's ultimately a temporary (and often low performance) fix.

Progressive enhancement has been repeatedly pitched as a partial solution to the problem. If someone's working on an older browser, the features that their browser can support will still be available, for example. In reality, though, progressive enhancement is hard and many developers and companies are finding it easier to draw lines in the sand of what browsers they'll support (like Google's recent announcement that they're dropping support for IE9 in their apps).

Part of this browser fragmentation is driven by the enterprise community's slower update cycles. Being respectful of their needs for stability, how do we help nudge them along so they can not only leverage the new and exciting capabilities of the Web Platform but also not hold back the platform?

Being what they are, enterprises are likely to remain relatively conservative, but auto update features are still making it into companies where strict adherence to versioning policies isn't mandated. A big lever, is that enterprises are now more likely to rely on third party apps like Google Apps or 37signals' Basecamp rather than internal intranets, so the control over which browsers get used increasingly comes down to a tug-of-war negotiation between SaaS providers and their customers, rather than solely down to the customers.

Closing

I honestly don't know how he does it. Between running a monster event, managing an incredibly popular weekly set of mailing lists (they need to be curated) and of course, actually doing work, it's incredible how he has time to even have a meal. So Peter, I'm grateful for you spending some time answering our questions, especially with Fluent approaching quickly.

I'll be at the conference myself and hopefully you can join Tuts+ at Fluent 2014. Save 20% by registering here with code TUTS+20. See you there!

The Treehouse Show is back for another week! In episode 80 of The Treehouse Show, Nick and Jason (@jseifer) talk about iFrame sandboxing, translation in angular js, progress bars, screenshots, and much more. There’s also the usual round up of bad jokes from Jason with Nick doing his best to ignore them.

This Week’s Links

• Play safely in sandboxed IFrames – HTML5 Rocks

• angular translate – i18n for your Angular apps, made easy.

• Liquidapsive (Liqui-dap-sive)

• sindresorhus/pageres

• Progress.js – Themeable progress bar library

• Dug.js — A JSONP to HTML Script — Rog.ie

• Grid

• Snugug/north

The post Sandboxed iFrames, Progress Element, Responsive Screenshots | The Treehouse Show Episode 80 appeared first on Treehouse Blog.

A West Coast software company is expanding to Baltimore to tap into the area’s growing cyber security industry.

ParaTools, based in Eugene, Ore., has opened a Baltimore office at the University of Maryland, Baltimore County’s bwtech@UMBC research and technology park. The company’s software was designed to make complex supercomputers run more efficiently. Now, ParaTools wants to use the same efficiency software to improve cyber operations.

“With our skills in optimizing software and computer performance we think there’s a lot of opportunity in the cyber,” said John Linford, who is heading up the company’s Baltimore office.

ParaTools’ software attaches itself to a system and creates a profile that shows how and where time is being spent. The information can be used to rewrite code in trouble spot and make the system run more smoothly.

The company’s first cyber contract will focus on improving efficiency of drone aircraft that scans for suspicious vehicles. Previously, the drones collected data and brought it home to be analyzed. With ParaTools’ technology, the drones will be able to send data real-time, so they can more quickly address any problems identified.

ParaTools currently has four employees and reported almost a million in profit last year. The company’s two founders, professors at the University of Oregon, are based in Eugene. Linford and a UMBC professor work out of Baltimore.

The new industry focus will hopefully mean steady growth for the company over the next few years. ParaTools hopes to add five employees in Baltimore and grow revenue over the next several years.

“We’re not looking for huge growth or rapid growth, but we are looking for steady growth,” Linford said.

- Sarah Gantz, Reporter, Baltimore Business Journal

No, I have been with UMBC since my freshman year.

Read Stephen's abstract here...

If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “traditional” scalable vector graphics that are used to replace bitmap PNGs. In fact, we can see SVG as an independent module that encapsulates CSS for the customization of views as well as the responsive behavior that also encapsulates JavaScript for the interaction logic.

Now, let’s dig a bit deeper into this technique.

Responsive SVG: The Hobo’s Method

Harrison’s Responsive Icons website is implemented pretty simply. It follows a well-known technique, image sprites. If you’re not familiar with sprites, let me explain. Image spriting is a technique that was previously used only for raster images to combat poor network performance. The idea is to combine a lot of small images into a single file, so that the client has to download only a single image from the server.

You would also use CSS to shift the image around and display only the part that you need for a particular element, saving the user the overhead of having to download every image individually. (Read more about sprites on CSS-Tricks.)

Harrison’s technique does the same thing, except with SVG instead of PNGs. This is what all of his icons combined into a single file would look like:

All Icons combined in a single SVG file. Large View.

This file, then, would be set as the background of a container in which one of these icon would need to be displayed:

.icon {
    	width: 300px;
    	height: 300px;
    	background: url(../images/home_sprite.svg);
    	background-position: center top;
    }

The example above is simple enough but has some problems. The solution is not portable enough. In fact, two parts are needed to make the method work: external CSS and an SVG sprite.

Responsive SVG: The Poor Man’s Method

Because CSS can be defined within SVG itself, let’s revise the example above to encapsulate the icon and to make it portable.

First, let’s remove all of the spatial shifts of the icons in the sprite. Of course, that leaves us with a layered mess of icons:

See the Pen inxym by Ilya Pukhalski (@pukhalski) on CodePen.

Then, let’s rearrange all of the shapes and group them by icon, adding an .icon class to each group, as well as numbers to be able to identify each one we want (so, #home_icon_0, #home_icon_1 and up to #home_icon_8):

<svg>
    	<g id="home_icon_0" class="icon">
    		<!-- paths and shapes -->
    	</g>
     
    	<!-- ... -->
     
    	<g id="home_icon_8" class="icon">
    		<!-- paths and shapes -->
    	</g>
    </svg>

Now, we’re ready to add media queries, so that we can select the icon in the SVG file that we want to display. For this purpose, writing the CSS directly in the <svg> tag is possible using <defs> tags.

<svg>
    	<defs>
    		<style>
    		/* Hide all of the icons first. */
    		.icon {
    			display: none;
    		}
    
    		/* Display the first one. */
    		#home_icon_0 {
    			display: block;
    		}
    
    		/* Display the desired icon and hide the others according to the viewport's size. */
    		@media screen and (min-width: 25em) {
    
    			#home_icon_0 {
    				display: none;
    			}
    
    			#home_icon_1 {
    				display: block;
    			}
    		}
    
    		@media screen and (min-width: 30em) {
    			#home_icon_1 {
    				display: none;
    			}
    
    			#home_icon_2 {
    				display: block;
    			}
    		}
    
    		/* And so on */
    
    		</style>
    	</defs>
    
    <!-- Icon groups go here -->
    
    </svg>

As a result, the same icon now adapts to the viewport’s size — except now, the CSS rules, media queries and SVG shapes are all encapsulated in the SVG file itself. Resize your browser to see how the example below works:

See the Pen uxIKB by Ilya Pukhalski (@pukhalski) on CodePen.

Responsive SVG: The Man With A Gun’s Method

The example above looks better than the first one, but questions remain:

• Could the responsive SVG be delivered in a better way?
• Is following a responsive approach for laying out the icons and customizing elements possible, rather than just hiding and showing parts of the file?

Looking to the content choreography and layout restructuring tricks that we rely on for responsive Web design on a daily basis, we can improve our prototype even still. We’ll use responsive design, shape restructuring and transformations to adapt the icons to different viewport sizes.

First, let’s redraw the biggest and most detailed house icon in our SVG sprite file, splitting all of the paths and joined shapes into elemental shapes. The result is much more readable, and applying any transformations to any part of the icon is now possible:

See the Pen Azqyn by Ilya Pukhalski (@pukhalski) on CodePen.

Our redrawn icon looks the same as the biggest one from the sprite but contains many more shapes and takes up a bit more space. The magic is that we’ll add media queries and transformations to the new variant, transforming the shapes of the icon itself to get the same result as the SVG sprite:

<svg>
    	<defs>
    		<style>
    		@media screen and (max-width: 65em) {
    
    			#door-shadow, #tube-shadow, .backyard {
    				display: none;
    			}
    
    			#door-body {
    				fill: white;
    			}
    
    			#door-handle {
    				fill: #E55C3C;
    			}
    
    			#door-body, #door-handle {
    				-ms-transform: translate(0,0);
    				-webkit-transform: translate(0,0);
    				transform: translate(0,0);
    			}
    
    			#window {
    				-ms-transform: translate(0,0) scale(1);
    				-webkit-transform: translate(0,0) scale(1);
    				transform: translate(0,0) scale(1);
    			}
    
    			#house-body {
    				-ms-transform: scaleX(1) translate(0, 0);    
    				-webkit-transform: scaleX(1) translate(0, 0);    
    				transform: scaleX(1) translate(0, 0);    
    			}
    
    			#tube-body {
    				-ms-transform: translate(0, 0);
    				-webkit-transform: translate(0, 0);
    				transform: translate(0, 0);
    			}
    
    			#tube-upper {
    				-ms-transform: translate(0, 0);
    				-webkit-transform: translate(0, 0);
    				transform: translate(0, 0);
    			}
    		}
    
    		/* And so on */
    
    		</style>
    	</defs>
    
    <!-- Icon groups go here -->
    
    </svg>

Once we’ve added a bit of transformation magic, the icon will behave just like Joe Harrison’s SVG sprite but will contain all of the logic within itself. Open the example below in a new window and resize it to see all of the icon variants.

See the Pen hFLDG by Ilya Pukhalski (@pukhalski) on CodePen.

Adapting the Icon to the Parent Container’s Size

One more thing. Making the icon respond to changes in its parent container (at least the width and height) is possible, too.

To do this, first, I tried to load the SVG file in an img element, wrapped in a div. But not even one media query in the SVG file seemed to work.

My second attempt was to load the icon in the flexible object element, wrapped in a div. Doing that made all of the media queries work. And making an object fill the space of its parent is now possible, too. (Don’t forget to set the width and height attributes of the svg element to 100% or to remove them completely.)

<div style="width: 100%; margin: 0 auto;">
    	<object>
    		<embed src="responsive3.svg" style="width: 100%; height: auto;" />
    	</object>
    </div>
    

As for other ways to embed SVG with media queries and transforms, you could use SVG as a background image for any block element. Inline SVG is allowed as well, but the media queries would respond to the viewport.

The example below demonstrates how the icon responds to different container sizes. The media queries in the SVG handle how the icon is drawn, according to the dimensions that the SVG is to be rendered in. Here are eight blocks with different sizes, embedded with one and the same SVG file.

See the Pen hszLl by Ilya Pukhalski (@pukhalski) on CodePen.

Adding JavaScript to SVG

More good news! The SVG file may encapsulate not only CSS, but JavaScript, too. In essence, we can regard an included SVG file as an independent module to which any old markup language may be applied.

JavaScript in SVG will work perfectly when embedded inline in the <object> element. Such a wonderful world, huh?

Browser Support

This last and most complex method of using SVG with media queries and transformations behaves perfectly in the following browser versions:

• Internet Explorer 9+
• Firefox 17+
• Chrome 17+
• Opera 15+
• Safari 6.0+
• Safari on iOS 6.0+
• Android browser on Android 3.0+

The technique might work in the old versions of browsers, but some transformations, such as scaling, wouldn’t be applied.

Conclusion

Responsive SVG icons can be used in a lot of ways, including the following:

• responsive advertisements (the ad content would occupy the space given to it by the document, and considering that CSS and JavaScript are allowed, most of the action would be contained to a single SVG file per ad);
• logos;
• application icons.

I should state that nothing is wrong with the sprites technique proposed by Joe Harrison. It works, and it’s necessary for some purposes!

Thoughts? Feedback? I look forward to your input in the comments section below.

Cheers, and have fun!

(al, ml, il)

© Ilya Pukhalski for Smashing Magazine, 2014.

There’s a trend right now, that wavers between irritating and inspired, for redesigning corporate logos in a hipster style.

Certain that hipsters could take it as well as dish it out, and inspired by the nearly infamous hipster logo generator, recently Whit Hiler and the team at Cornett Integrated Marketing Solutions decided to turn the trend on its head and redesign a collection of hipster (or rather, hipsterish) logos in the spirit of all that is corporate.

I found the hipsterish-to-corporate exercise deeply disturbing, as if this is what hell looks like from inside a descending handbasket, but I couldn’t stop looking. It’s illuminating to see the warmth and character slowly strangled from a company’s logo to be replaced with soulless corporate gradients and sharp edges. It says as much about the popularity of hipster design, as it does big-business branding.

My personal favorite is the Urban Outfitters logo (no change). What’s yours?

Create Special Effects Like a Pro with Photo Effect Studio – only $14!