It's been awhile since we've seen any updates in the editor space. The last big splash was made by Sublime Text which took the web development community by storm, especially once Package Control came around to serve as the package manager for the editor.

Well, GitHub is looking to shake things up with the beta launch of a new editor called Atom. I got my hands on a beta and wanted to give you a rundown of what it offers. One thing to note is that the documentation is a bit sparse, so it was tough trying to determine what every feature did, but I'll be touching on the important aspects below.

A Hackable Text Editor for the 21st Century

The first thing to keep in mind is that this is a beta version; things are going to change and some things aren't going to be in this release. For example, I didn't find a way to create a project out of a directory, which is kind of important to me. It's not ideal, but I'm also being realistic about the status of the product.

The next thing to bring up is that this editor was created completely with web technology. For example, the underlying architecture relies on Chromium (yes the basis for Google Chrome), making every window a locally-rendered web page. Why didn't they just build it as a browser-based IDE like Cloud9IDE? Because, despite a lot of progress in file APIs for the browser, there are still limitations in terms of file system access, so building it as a desktop app made a lot of sense.

Yep, that's the Chromium Developer Tools running within the editor and I'm highlighting an element with it. It's pretty freaky to be able to modify the code within my editor with the Chrome DevTools, but it goes to show that the underlying engine is web-based.

They also leveraged Node.js to allow for file system access and provide tremendous flexibility and extensibility in their packaging system basically making Atom highly customizable and giving it incredible access to a ton of npms.

Ultimately, this statement explains best why they leveraged web technologies:

With the entire industry pushing web technology forward, we're confident that we're building Atom on fertile ground. Native UI technologies come and go, but the web is a standard that can only becomes more capable and ubiquitous with every passing year. We're excited to dig deeper into its toolbox.

When you first drop into Atom, it looks strikingly similar to Sublime, making it easy from a visual perspective to slide into it.

One of the first things I wanted to check was language support. While I primarily work in JavaScript, I have a burning desire to get into Ruby on Rails so ensuring broad language support. Not only does it support Ruby syntax but also the Rails framework along with:

• Python
• CoffeeScript
• Go
• Sass
• YAML

and a ton of others.

The breadth of coverage is very comprehensive and on par with any editor I've seen.

But it's more than just supporting languages. Atom also supports syntax shortcuts (called snippets) that allow you to quickly create code blocks with minimal typing.

For example, if I type in ife followed by a tab, I'll get the following:

if (true) {
    
    } else {
    
    }

And simply typing in a lower case "f" followed by a tab gives me a skeleton for an anonymous function:

function () {
    
    }

Products like TextExpander and other editors have done these for some time, so it's good to see GitHub including it day one.

It's Customizable

One of the things that still irks me about Sublime (even v3), is that many of the configuration settings need to be adjusted manually. In Atom, it looks like all settings are available and customizable via a settings panel, giving you the ability to update things such as:

• Font family and size
• Line numbers
• Themes
• Packages

As well as easily disable packages that you've installed.

Personalizing an editor is one of the first things any program does, especially the theme since it's what you'll look at every day. Atom comes with five themes by default, in both light and dark variations, but via it's packages manager, you can add more to suit your taste:

I was happy to see the "Monokai" theme in there since it's my personal favorite.

Now, remember how I mentioned previously that you had access to the developer tools and that Atom editor windows are basically rendered web pages? Well, what this means is that you have a ton of flexibility in customizing the look and feel of things, because you're able to inspect DOM nodes and see what styles have been applied to them. Atom allows you to define your own styles in a LESS stylesheet called styles.less, giving you really granular control over the look of specific types of elements. Getting to the stylesheet is as simple as going to Atom > Open Your Stylesheet and making your changes in the appropriate section.

.editor {
    
      .meta.tag.sgml.doctype.html { font-size: 26px; }
    
    }

In this case, I updated the .editor class by adding the classes that define how the DOCTYPE of a file will look inside the editor. I made the font size 26px to be purposely large. The following image shows how this update affected the rendering of my HTML code:

As you can see, you can really dig deep into Atom and customize it to your heart's content since it's basically HTML and DOM under the hood.

Along with being able to install new themes, Atom also provides a built-in package manager that allows you to extend the functionality of the editor. This is analogous to Sublime Package Control, except it's already baked into the editor itself as opposed to being forced to install a separate script to get it.

Installing a package is as easy as clicking the Install button. The editor provides a list of "featured" packages along with a search functionality that pulls from the main package registry.

If you want to do this via the command-line, Atom provides a CLI for it called apm (Atom Package Manager) that allows you to install any package with the following command:

apm install <package name>

So installing the autocomplete package would look like this:

Currently, the number of packages available is small, but that's to be expected at this stage.

You'll be able to find great packages though for things like:

• Previewing Markdown
• Going to a specific line
• Autosave when your editor goes out of focus

And many more. I can't imagine it'll be long before GitHub recruits all of the Sublime package creators to port their work over. In fact, there's already documentation showing how you can convert your TextMate Bundle over to Atom. Since many TextMate Bundles are compatible with Sublime, it seems conceivable that some Sublime packages may be able to be converted over, but don't hold me to that since I haven't tested it out myself.

This is also a good opportunity for contributors to jump in and offer up new packages. While Atom has most of the basics, it's missing some important ones, like linters and syntax highlighters. That's a void that needs to be filled and I can imagine it happening in short order.

Key bindings are also customizable using the local ~/.atom/keymap.cson. You can open this file manually or by going to the Atom > Open Your Keymap menu option. Opening the file will show you some examples of how to edit the key bindings.

The one key binding you'll need to remember is Command-Shift-P, which pops up the command palette and displays all of the possible key bindings with associated functionality.

The Getting Started guide offers you some basic guidance on how to use Atom and is worth the read. But just know that the project site is a bit sparse on documentation right now, so some of the editor's capabilities you'll have to learn by trial and error.

Stacking Up Against Other Editors

Many of you are probably asking how it stacks up against your favorite editor. Since Sublime is my personal choice, I can say that Atom is a fairly decent beta product, but not something I'd switch to immediately. Sublime's built-in functionality plus extensive package ecosystem makes it a very mature editor to work with.

Having said that, Atom is backed by GitHub and that holds a ton of weight. There's major geek cred there and I'm pretty confident we're going to see a major run on new packages, especially considering the extensibility that Atom provides via Chromium and Node.

For now, GitHub is offering Atom free during the beta period, giving developers a chance to tinker with it and get their hands dirty. If they can keep pricing competitive and rapidly build up the package ecosystem, I think Atom will end up being my new editor of choice.

Interview with Michael Sabo of DB Networks

Rooms To Grow

UMBC alumni, professors and students find new spaces and places for innovation.

Photography by Marlayna Demond ’11

* * * *

Much of the journey of creation takes place in the space of the human mind. Yet that journey is not a solitary one. Intellects require companionship. Great ideas spark new approaches – and more new ideas – when they are tested by conversation and forged in collaboration. And those combinations require spaces to encourage and enhance their work.

A research university such as UMBC excels in creating such spaces. Not only do its professors and students create them on (or nearby) the campus, but the university’s alumni carry that spirit of exploration into our community.

We invite you to take a closer looks at these spaces where the next great ideas in numerous disciplines are being developed or taught right now by members of the UMBC community.

THE CYBER HIVE

Proximity. Potentiality. Coffee.

This morning, you can almost hear the first two qualities over the hiss of the coffeemaker as the employees of Integrata Security watch a presentation by their CEO, Mike Geppi in the CyberHive – a joint project between bwtech@UMBC, the Maryland Department of Business and Economic Development, Corporate Office Properties Trust (COPT) and Merritt Properties.

The Cyber Hive is a collaborative space with four tenants (including Integrata Security) and six affiliates. Tenants have dedicated office space and access to the common areas, while affiliates have access to the common areas. “It’s very high tech,” says Geppi.

Integrata Security is developing technology for secure wireless networks. The National Security Agency (NSA) was interested in how to make wireless networks secure, and after a survey of commercially available solutions, the agency determined that none was secure enough. So the NSA invented a new technology, which Integrata has licensed and is developing for commercial and government use.

For Geppi, part of the CyberHive’s allure is its location. “Being close to the NSA is fantastic,” he says. “Not only is the location of the CyberHive great but we also have access to the talent on the UMBC campus.”

Ellen Hemmerly, president and executive director of bwtech@UMBC, says that combination was just what she and her team had in mind with the venture, which will further boost the research park’s already burgeoning presence in the cybertechnology field.

“It adds to our cyber program at bwtech@UMBC by providing co-working space and meeting space that will facilitate the growing of our affiliate program, which houses cybersecurity companies that don’t need a dedicated office space,” she says “We also hope it will facilitate partnerships between cyber companies, UMBC faculty and students.”

Geppi says the design of the Cyber Hive makes it a naturally collaborative environment. “We do interact with other companies and that’s a real benefit. Having startups talk with each other. It typically leads to opportunity. We can develop strategic partnerships or find customers. Some of the entrepreneurs here are going through the exact same thing I’m going through and it’s good to be able to compare notes.”

While Geppi meets with his team, Tyler Simon and John Linford meet in a private office.  They are both research scientists for Paratools, a software engineering firm.  Simon, who is also a research scientist in the computer science and electrical engineering department at UMBC, agrees with Geppi about the Cyber Hive’s possibilities for collaboration.

“People are more likely to collaborate because they just walk by,” Simon observes. “It’s better than just a bunch of closed offices.”

Linford concurs: “It’s the first incubator I’ve been in that has that feature.”

– Nicole Ruediger

For more information about the Cyber Hive: http://www.bwtechumbc.com/pdf/cyberhive.pdf

Summer Training in Alcohol Research

The University of Kentucky offers a 10-­week, paid laboratory experience for talented undergraduate students interested in gaining research experience in alcohol-­related disorders such as alcoholism, fetal alcohol syndrome, cancer, and pain. This is a competitive program designed for students considering a career in a science, technology, engineering or math-­related fields, but especially graduate study. Opportunities range from applied psychological approaches in humans to basic cellular mechanisms of alcohol action in cell culture. Students will spend the summer performing independent research under the supervision of faculty mentors, graduate students and postdoctoral fellows, give a scientific presentation that describes their accomplishments, and have the opportunity to contribute to front-­line research in either of these areas.

A few HTML elements don’t play nice with responsive layouts. One of these is the good ol’ iframe, which you may need to use when embedding content from external sources such as YouTube.

In this article, we’ll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport. For those occasions when non-coders will be embedding video on your website and you don’t want to rely on them adding extra markup, we’ll also look at a solution that uses JavaScript instead of CSS.

(You can see a demo of these techniques on my blog.)

The Markup For Embedded Content

Services such as YouTube provide code that you can copy and paste into your own website to embed content. I tend to recommend to my clients that they host video with YouTube because it will save them server space and, regardless of the user’s browser or device, YouTube will display the video correctly. The two main ways to embed video on a website are the HTML5 video element, which doesn’t work in legacy versions of Internet Explorer, and Flash, which doesn’t work on iOS devices and isn’t standards-compliant.

When you embed content from an external source, the code will include an iframe:

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
    

This iframe enables external content to be displayed on your website, because it includes a URL that points to the source of the streamed content.

However, you’ll notice that our iframe includes width and height attributes. Remove these and the iframe will disappear because it would have no dimensions. And you can’t fix this in your style sheet, unfortunately.

The width attribute means that, on a screen narrower than 560 pixels, the embedded content will protrude outside of its containing element, breaking the layout. In the example below, I’ve added the code above to a page of my blog. The screenshot is taken from an iPhone in portrait mode (320 pixels wide), and the rest of the page has been shrunk so that the embedded content fits the screen. Far from ideal!

Screenshot taken from an iPhone in portrait mode (320px wide). (Larger view)

Fortunately, there is a way around this using CSS. First, I’ll show you how to do this with embedded video, and then with calendars.

Responsive Video

The Markup

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:

    <div>
        <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
        </iframe>
    </div>
    

The next step is to add styling to this new wrapper and the iframe within it.

The CSS

First, we style the containing wrapper with the .video-container class. As proposed by Thierry Koblentz in his ALA article “Creating Intrinsic Ratios For Video”, we can use the following snippet in our style sheet:

    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    

This does a few things:

• Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
• The padding-bottom value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%.
• The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
• The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
• Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.

We also need to style the iframe itself. Add the following to your style sheet:

    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

This targets iframes inside containers with the .video-container class. Let’s work through the code:

• Absolute positioning is used because the containing element has a height of 0. If the iframe were positioned normally, we would have given it a height of 0 as well.
• The top and left properties position the iframe correctly in the containing element.
• The width and height properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).

Having done this, the video will now resize with the screen’s width. Here’s how it will look on a desktop:

Desktop screenshot of the video resizing the screen’s width. (Larger view)

And here’s how it will look on a screen that is 320 pixels wide:

The video on a 320 pixels wide screen. (Larger view)

Let’s move on to other sources of embedded content — specifically, Google calendars.

Responsive Calendar

The Markup

The CSS to make any form of embedded content responsive is essentially the same, but different content will have different aspect ratios, which means you’ll need to set the padding-bottom value accordingly.

Below is a screenshot of a website that I manage for a primary school, a website that embeds a Google calendar. As you can see, the calendar breaks the layout on a small screen. In this case, the website is displayed at the correct width, but the calendar goes beyond the screen’s width.

The calendar breaks the layout on a small screen. (Larger view)

The markup for the embedded calendar is as follows:

    <iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
    

To make a calendar responsive, add a div with a class of .calendar-container to contain the iframe:

    <div>
        <iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no">
        </iframe>
    </div>
    

The next step is to style this div.

The CSS

The CSS for a calendar is almost identical to the CSS for a video, with two exceptions: The aspect ratio will be different, and padding-top isn’t needed.

Add the following to your style sheet:

    .calendar-container {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
    }
    

In this case, the iframe is 800 pixels wide and 600 pixels high, which gives us an aspect ratio of 4:3. So, set padding-bottom to be 75%.

Having done this, we need to apply the same styling to the iframe element in this new container:

    .calendar-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

This is exactly the same styling that we applied to the video.

Now, the calendar will resize with the browser window, as shown here in Opera Mobile on an Android phone:

As long as you remember to wrap your embedded calendars and videos with the appropriate containing element, then this CSS will work for any new videos and calendars that you add to your website.

The problem, however, is that although you can fit the whole calendar on a page, it’s still almost unusable because click targets are so small and no information is visible. If you absolutely have to display Google Calendar, you can, but if you can use more usable responsive calendar solutions like simple CSS (setting display: block on table rows, for example), or w3widgets Responsive calendar or Calendario for your own calendars, your users might appreciate it.

Responsive Video With CSS or JavaScript

If you’re developing a responsive website using a content management system, then one or more of the website’s editors will probably have to embed video at some point. You can point your editors to EmbedResponsively.com which generates responsive <embed> codes for embedding rich third-party media with one click, with CSS alone. Alternatively, you could use a JavaScript solution, to relieve nervous editors from having to add extra CSS and markup. However, as long as you can avoid this path, the better, of course.

Until recently, most solutions were plugins, which are OK to an extent but can have performance issues. A popular plugin is FitVids.js, developed by Chris Coyier and Paravel.

A more current solution is to use just a script — such as FluidVids.js, developed by Todd Motto. FluidVids.js is simple to use:

1. Download the script (ZIP) from GitHub and upload it to your server with the same folder structure that the downloaded files come in. This will place the script itself in a folder named dist.
2. Call the script in each page’s <head> section with the following code:

    <script src="dist/fluidvids.js></script>
    

That’s all you need to do to make videos resize on all devices that support JavaScript. It works not only for YouTube, but for Vimeo, too. The problem, however, is that if you users don’t have JavaScript support or the JavaScript hasn’t loaded yet or JavaScript hasn’t loaded correctly, the only fallback you can use is to add the following to your style sheet:

    iframe {
        max-width: 100%; 
    }
    

This will ensure that video resizes to the width of the browser’s window. But it won’t resize the video’s height; unfortunately, iframe just doesn’t work this way. So, the video won’t break your layout, but it won’t look very good either. This is not really a good option, so if you can avoid using JavaScript for videos, it’s a good idea to do so.

Responsive Google Maps

Apart from videos and calendars, another common issue is the embedding of Google maps, responsively. Basically, we again use the same intrinsic ratio technique, and when setting padding-bottom for the wrapper, we just divide the height by width and add the aspect ratio in CSS.

Usually, the code generated by Google Maps would look like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>

We just wrap a div around the iframe and apply the familiar CSS styling to it:

    .google-maps {
        position: relative;
        padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

And this is what the markup will look like:

    <div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe>
    </div>

Voilá! Again, we can just use EmbedResponsively to generate the copy-paste-code with one click.

Summary

Embedded content has a habit of breaking responsive layouts, because it’s contained in an iframe with a fixed width. In this article, we’ve seen how to add a single containing wrapper, and some CSS, to ensure that all embedded content contained in an iframe resizes with the browser’s window.

Sometimes it’s good enough, but sometimes you might need to come up with more advanced solutions, since resizing isn’t always a solution. We’ve also looked at embed code generators and alternative solutions, using JavaScript, which might be necessary in some cases, especially if editors have to deal with many videos and don’t have technical skills required, or CMS doesn’t allow for inline styling.

How do you embed third-party content on your responsive websites? Have you discovered any particular tricks or techniques? What does your workflow for embedding such content look like?

(al, vf, il)

Front page image credits: Juhan Sonin.

© Rachel McCollin for Smashing Magazine, 2014.

For designers passionate about the latest developments across the full spectrum of visual design, there’s a brand new site that features some of the most exciting, innovative and inspiring design projects taking place today. Every day our sister-site, DesignFaves.com, trawls the web seeking out the projects with the most buzz surrounding them and delivers a compact, visual summary right to your inbox.

Focused on all fields of design, you’ll find graphic design, art, architecture, furniture design, fashion, branding, photography, and everything else that’s visual and engaging.

You can sign up for the newsletter and get your daily dose of design inspiration each morning, or browse through the site when you’re feeling tapped for new ideas. Whoever you are, and whatever you love, you’ll find fresh projects on DesignFaves.com.

Every month we’ll be bringing you a summary of the best the site has to offer, here are our favorite projects for February:

Action packed car jumps or weird hovering automobiles?

Solemn chapel is iconic testament to enduring culture

Hypnotic video of an endlessly walking and transforming creature

Family photos with mannequins poke fun at the American dream

Printable touch technology might revolutionize manufacturing

8,000 sheets of rice paper assembled into massive ‘boat’ installation

12 hilarious pictures of dogs transformed into fashion models

Delicate sculptures created through paper folding

‘Sad Keanu Reeves’ meme is now a 3D printed figurine

Simple street art personifies inanimate objects

Miniature clones help this photographer at work

18 classic rock album covers… minus dead band members

Intimate ocean photos give a new perspective on waves

Stitching the industrialization of daily life

Learn about this man’s shocking method to document his travels

 Which of these posts is your favorite? What would you like to see DesignFaves.com cover? Let us know in the comments.

Remove Image Backgrounds with PhotoScissors (Win/Mac) – only $9.97!