Jessica Berman, Director of the Dresher Center for the Humanities and Professor of English, has been appointed to a three-year term to serve on the Modern Language Association’s (MLA) Publications Committee.

The committee oversees all of MLA’s book publication programs, including its “Approaches to Teaching World Literature” and “Teaching Languages Literatures and Cultures” series. It assesses prospectuses and approves final manuscripts and it’s also charged with consulting on priorities and policies for the scholarly communication program and assisting with new initiatives in scholarly communication. Congratulations, Dr. Berman!

An article published April 15 in The New Yorker explores the surprising science behind yawning and what makes it so unique. Psychology Professor Robert Provine, author of Curious Behavior: Yawning, Laughing, Hiccupping, and Beyond, was interviewed for the article and commented on his research studying the concept.

“Yawning may have the dubious distinction of being the least understood, common human behavior,” Provine observed. The article discusses Provine’s studies that explored contagious yawning, one of which found eighty-eight per cent of people who were instructed to think of yawns yawned themselves within thirty minutes. It also examines how the contagious nature of yawning may be highlighted by something very different than empathy, but rather as a form of communication.

“We’re getting insight into the human herd: yawning as a primal form of sociality,” Provine said. “It’s often said that behavior doesn’t leave fossils,” he added. “But, with yawning, you are looking at a behavioral fossil. You’re getting an insight into how all of behavior once was.”

To read the full article in The New Yorker, click here.

An article published in The Washington Post April 15 examines the steps Maryland Governor Martin O’Malley has taken during the last year in preparation for a potential White House bid in 2016. The article states O’Malley has been pivoting toward the left and has energized the Democratic base on issues such as gun control, same-sex marriage and raising the minimum wage.

Public Policy Professor and Chair Donald Norris was interviewed for the article and said it is clear to many that O’Malley is attempting to appeal to the left ahead of the 2016 election.

“I think everybody in Maryland who pays any attention to politics has come to that conclusion,” Norris said.

Norris was also interviewed for an article in The Diamondback on the state legislature taking a very different look next year after Gov. O’Malley’s term comes to an end and with 25 percent of the legislature changing. Norris said the state leadership system will be an important factor next year.

“As long as that structure remains in place, losing or changing 20, 30, even 40 delegates and senators doesn’t actually change the operation of those houses,” Norris said.

Norris was also interviewed for an article in the Baltimore Jewish Times about a Maryland legislative session recap. The complete article can be found here.

To read the full article in The Washington Post, click here. For the complete article in The Diamondback, click here.

Join us as we celebrate the amazing work our students do during the Undergraduate Research and Creative Achievement Day (URCAD) on Wednesday, April 23, 2014. URCAD celebrates research, scholarship and creative work carried out by UMBC undergraduates across all majors and areas of study.

The event will also feature as its guest speaker alumnus Corey Fleischer ’05, ’08 MS Mechanical Engineering, who is Senior Mechanical Engineer at Lockheed Martin. In 2013 Corey was chosen to be part of Discovery Channel’s “The Big Brain Theory: Pure Genius.” He participated in several challenges that put his engineering skills to the test. In the final challenge, Corey’s team had to build a bridge to span a thirty-four-foot gorge. The bridge had to be mobile; all of the components had to fit in the back of a pick-up truck. The team had to build the bridge and prove that a truck could drive over it. After prevailing over nine other talented engineers, Corey won the competition.

Learn more and join us on April 23!

(Photo by Kenny Louie / Flickr)

An exciting feature of the HTML specification that’s been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

Free trial on Treehouse: Do you want to learn more about HTML and front-end programming? Click here to try a free 14-day trial on Treehouse.

In this blog post you’re going to learn how to create your own HTML elements and define a JavaScript API for them.

Let’s get started.

Creating Custom HTML Elements

The document.registerElement() method is used to create a custom HTML element. This should be passed as the name of your custom element along with an (optional) object that defines the API.

In the following example we simply create a new HTML element called <x-treehouse> and then add it to the page.

var XTreehouseElement = document.registerElement('x-treehouse');
    document.body.appendChild(new XTreehouseElement());
    

This would add the following HTML to the end of the <body> element:

<x-treehouse></x-treehouse>
    

The name of your custom element must contain a dash (-) so that the browsers parser can determine between standard and custom HTML elements. This also means that you won’t encounter problems if a new HTML element is introduced that uses the same name as your custom element.

Creating a JavaScript API For Your Element

You can define a JavaScript API for your custom element that consists of a number of methods and properties. To do this, start by creating a new JavaScript object. This can be done using the Object.create() method. Passing HTMLElement.prototype to this method will create an object with the standard set of methods and properties available to HTML elements.

var XTreehouseProto = Object.create(HTMLElement.prototype);
    

You can then define your custom methods on this new object, as shown below.

XTreehouseProto.hello = function() {
        alert('Hello!');
    }
    

To define a property for your custom element you can use the Object.defineProperty() method. The first parameter should be your prototype object; the second is the name of the property; and the third should be an object describing the behaviour of that property. This is where you can set a default value as well as specify whether the property is writable or read-only.

Object.defineProperty(XTreehouseProto, 'badges', { 
        value: 20,
        writable : true
    });
    

Once you’ve defined the API for your custom element, you need to call document.registerElement(). Use the name of your custom element as the first parameter, and then pass in an object with a property named prototype. The value of this property should be set to the prototype object you created earlier.

var XTreehouseElement = document.registerElement('x-treehouse',  { 
        prototype: XTreehouseProto
    });
    

Once you’ve registered your custom element, you can create a new instance of the element and add it to the page.

var xtreehouse = new XTreehouseElement();
    document.body.appendChild(xtreehouse);
    

The methods and properties you defined earlier can be accessed just as you would on any other HTML element.

xtreehouse.hello();
    var badges = xtreehouse.badges;
    

Extending Existing Elements

As well as creating your own custom elements, you can also use the registerElement() method to extend the functionality of existing HTML elements. Let’s extend the <img> element to create a variation for displaying thumbnail images.

You start by creating a prototype object as we did before. This time, however, you want to copy the prototype object of the element you are extending. In this case, that will be the HTMLImageElement.

var ThumbImageProto = Object.create(HTMLImageElement.prototype);
    

Next you define a function for the createdCallback, which is fired when the element is created. (More on callbacks is in the next section.) Here we can set the width and height of the image.

ThumbImageProto.createdCallback = function() {
        this.width = '100';
        this.height = '100';
    };
    

You can also define custom methods and properties as before.

ThumbImageProto.changeImage = function() {
        this.src = 'new-image.jpg';
    };
    

When extending an existing element, you need to add the extends property to your options object in the call to document.registerElement(). This property should be set to the name of the element you are extending.

var ThumbImage = document.registerElement('thumb-img', {
        prototype: ThumbImageProto,
        extends: 'img'
    });
    

To use your custom element, you can now specify an is attribute on the element that you have extended. Setting the value of this attribute to the name of your custom element will tell the browser that this <img> element should use the API defined for thumb-img.

<img is="thumb-img">
    

Custom Element Callback Methods

There are a number of callbacks that you can listen for when creating and managing your custom elements.

• createdCallback – Called when a custom element is created.
• attachedCallback – Called when a custom element is inserted into the DOM.
• detachedCallback – Called when a custom element is removed from the DOM.
• attributeChangedCallback(attrName, oldValue, newValue) – Called when an attribute on a custom element changes.

You specify functions for these callbacks on the prototype object that’s passed to document.registerElement().

var XTreehouseProto = Object.create(HTMLElement.prototype);
    
    XTreehouseProto.createdCallback = function() {}
    XTreehouseProto.attachedCallback = function() {}
    XTreehouseProto.detachedCallback = function() {}
    XTreehouseProto.attributeChangedCallback = function(attrName, oldValue, newValue) {}
    
    var XTreehouse = document.registerElement('x-treehouse',  { prototype: XTreehouseProto });
    

Custom Elements with Shadow DOM

The true power of custom elements becomes clear when you think about how they can be used alongside Shadow DOM. This makes it really easy to create reusable interface components.

Using custom elements and shadow DOM to create reusable product cards.

In this section we’re going to look at an example of how you can use custom elements and Shadow DOM to create an interface component for displaying products in a web store. The idea here is that a web developer can easily create new products by adding a single line of HTML to their markup. All of the information needed to display the product is contained within data- attributes on the custom element.

<x-product data-name="Product Name" data-img="image.png" data-url="http://example.com"></x-product&gt;
    

We’ll start by create a new prototype object based off of HTMLElement.prototype.

// Create a new object based of the HTMLElement prototype
    var XProductProto = Object.create(HTMLElement.prototype);
    

Next we need to set up a function for createdCallback. This is where we will create the <img> and <a> elements that are responsible for displaying the product. I’ll show you the code first and then walk you through it.

// Set up the element.
    XProductProto.createdCallback = function() {
        // Create a Shadow Root
        var shadow = this.createShadowRoot();
    
        // Create an img element and set it's attributes.
        var img = document.createElement('img');
        img.alt = this.getAttribute('data-name');
        img.src = this.getAttribute('data-img');
        img.width = '150';
        img.height = '150';
        img.className = 'product-img';
    
        // Add the image to the Shadow Root.
        shadow.appendChild(img);
    
        // Add an event listener to the image.
        img.addEventListener('click', function(e) {
            window.location = this.getAttribute('data-url');
        });
    
        // Create a link to the product.
        var link = document.createElement('a');
        link.innerText = this.getAttribute('data-name');
        link.href = this.getAttribute('data-url');
        link.className = 'product-name';
    
        // Add the link to the Shadow Root.
        shadow.appendChild(link);
    };
    

Here we start by creating a new Shadow Root. If you’re not familiar with using the Shadow DOM, you might want to check out my previous post. We then create an <img> element and set its alt, src, height, and width attributes using the information specified on the x-product element.

Note: Inside the callback function, this refers to the custom element in your markup.

Next we add the <img> element to the shadow root and create a new <a> element. Again we set the attributes on the element using information from the data- attributes on the custom element. To finish up we add the <a> element we just created to the shadow root.

Now we need to register the custom element. Call document.registerElement() passing in x-product as the element name, and specifying the XProductProto object as the prototype.

// Register the new element.
    var XProduct = document.registerElement('x-product', {
        prototype: XProductProto
    });
    

That concludes all the JavaScript code that’s needed to get this demo working. Let’s add a bit of CSS to style the product items.

x-product {
        display: inline-block;
        float: left;
        margin: 0.5em;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        font-family: Helvetica, arial, sans-serif;
        -webkit-font-smoothing: antialiased;
    }
    
    x-product::shadow .product-img {
        cursor: pointer;
        background: #FFF;
        margin: 0.5em;
    }
    
    x-product::shadow .product-name {
        display: block;
        text-align: center;
        text-decoration: none;
        color: #08C;
        border-top: 1px solid #EEE;
        font-weight: bold;
        padding: 0.75em 0;
    }
    

To display a product, we just need to add an <x-product> element to the HTML markup. The product data is set using the data-name, data-img, and data-url attributes. When the page loads, the browser will recognise these as custom elements and fire the createdCallback event for each of them.

<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product&gt;
    <x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product&gt;
    <x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product&gt;
    

That’s it! You’ve now created a demo application that uses custom elements and shadow DOM to display a series of products.

Check out the demo to see this in action.

View The Demo on CodePen

Note: This demo requires Shadow DOM, which is only supported in Chrome Canary.

Browser Support for Custom HTML Elements

Google Chrome (version 33+) and Opera are the only browsers with support for custom elements at the moment. However, there is a great polyfill available from the Polymer project that will add support for custom elements to other browsers. The x-tags polyfill maintained by Mozilla is also very useful.

Download the Polymer CustomElements Polyfill

You can check to see if the user’s browser supports custom elements by looking for the registerElement() method on the document object.

if ('registerElement' in document) {
        // Supported.
    } else {
        // Not supported.
    }
    

Final Thoughts

In this post you’ve learned how to create custom HTML elements for use within your web applications. You’ve also seen how to use custom elements alongside other technologies like Shadow DOM to build rich front-end web applications.

Custom elements promise to give web developers the ability to extend the web platform to better meet their needs. Being part of the web components suite, custom elements also play nicely with other technologies such as Shadow DOM and HTML templates. There’s no doubt in my mind that the introduction of web components marks a huge leap forward in the development of front-end web applications. The more I learn about this suite of technologies, the more excited I get!

What do you think about custom elements? Are you planning to use them in your projects? Share your thoughts in the comments.

Useful Links

• HTML5 Rocks: Custom Elements
• Web Components: A Tectonic Shift for Web Development
• Polymer
• x-tags Polyfill

The post How to Create Custom HTML Elements appeared first on Treehouse Blog.

Ethan Ferrari

This guest post is by Ethan Ferrari, a Treehouse student, designer and developer from Peoria, Ill. Ferrari, 30, started his own company, 309design.com, in February. He says he hasn’t had a chance to build the site yet because he has “more work than time. Hopefully I’ll launch that by May 1.”

Ferrari, who works with HTML5, CSS3, SCSS, JavaScript, jQuery, PHP, and MySQL, is learning advanced JavaScript, Angular.js, PDO, and Object-Oriented PHP in the next six months. Check out his portfolio at www.behance.net/309design.

For anyone who’s decided to learn programming, web design, or graphic design on their own, you understand the ludicrous amount of new information you need to learn and learn fast. As a self-starter in this field, you’re probably a smart cookie and a determined one at that.

However, no matter how quickly you pick things up, there is one crucial obstacle standing between you and mastery: not knowing what you don’t know! If you’re just starting out, this is going to sound silly. But just wait until you need to create a feature and you don’t even know what the technology is called that will solve your problem.

Free trial on Treehouse: Do you want to learn the design and development skills that can further your career or help you land work? Click here to try a free 14-day trial on Treehouse.

If you’re a new designer or developer, chances are you’re not going to have a network built up around you of tech-savvy friends who can immediately point you in the right direction. Sure, you can Google your question, but what if you don’t know how to describe it? And even if you do, you’re going to spend hours browsing forums and using trial and error until something finally works.

While this process certainly brings you a deeper understanding of code, its opportunity cost is an incredible amount of time, not to mention frustration. And, undoubtedly, as you continue to learn, you’ll find that many of those solutions you unearthed weren’t actually best practices. If only you could get that same level of understanding without wasting the time.

Enter Treehouse.

Treehouse brings together all of the languages and platforms you’ll need to understand as a successful web designer and sticks them into one beautifully designed app. If Treehouse was just a list of the different technologies you’d need and what they could do, it would still be incredibly valuable.

But Treehouse is so much more. Through an excellent, professional video series, they give you the foundational knowledge you’ll need to not only get started, but get excited about your projects. This isn’t just HTML and CSS. It isn’t an introduction to JavaScript and then “you’re on your own.”

Treehouse is a carefully planned, carefully organized system that will turn you from a creative person with a passion to learn into a person with the ability to create passionately. With Treehouse, we have something fresh, valuable, and most of all, needed; and I for one am incredibly grateful for their efforts.

More than a year and a half ago, I embarked on a what has now become my career, but I did it through teach-yourself books, Google, and StackOverflow. Am I proud of my progress? You bet. Am I still learning? Every day.

And with Treehouse, it’s the difference between an uphill battle and a gentle slope. I cannot tell you how much I wish I’d had Treehouse from the very beginning. It’s the community I never had, for all of the things I never knew I never knew. If you’ve stepped onto the path of becoming a designer or developer, do yourself a favor and get this app.

From one self-starter to another, I can guarantee you’ll be glad you did.

The post Treehouse Supplies the Knowledge You Never Knew You Didn’t Have appeared first on Treehouse Blog.

In the fall of 2003, Kevin Yang ’07 computer science and financial economics and Katelyn Niu ’05, biochemistry, found themselves in the same physics study group.

But their relationship began to bloom a year later, when a computer virus brought them together.

“Katelyn’s computer was affected by a virus, and she called me for help,” Kevin recalls.

He admits that he took his time fixing the computer problem, making several trips to Katelyn’s place at Walker Avenue Apartments. “That gave us time to chat,” he says.

Kevin and Katelyn also began bumping into one another more frequently in the dining hall. “I wasn’t stalking her or anything, but I have a good memory and I memorized her schedule. I’d show up [at the dining hall] a little before she’d get there,” he says with a playful grin.

While Kevin found the time in his full academic schedule to see Katelyn, her recollection of life as an undergraduate at UMBC is a little different.

“I was always so busy studying,” Katelyn says, who earned a joint Ph.D./D.D.S. from the University of Maryland, Baltimore, after graduation.

Katelyn was eventually won over by Kevin’s persistence. The couple married this past fall at the Center Club in Baltimore after a two-year engagement. They live in Ellicott City, a half-way point between Katelyn’s commute to her dentist’s office in Hagerstown andKevin’s position as an investment analyst at T. Rowe Price in downtown Baltimore.

While life as young commuting professionals is busy, Katelyn and Kevin stay connected to UMBC. She uses the pool on occasion; he plays tennis on the campus’s courts. They volunteer their time at recruiting events for prospective students, and attend alumni events. They also see UMBC President Freeman A. Hrabowski, III and his wife, Jackie, from time to time.

“I was a Meyerhoff Scholar,” says Kevin. “He was the founder. We’ve kept in touch .”

Read the full issue of the Winter 2014 UMBC Magazine.