<?xml version="1.0"?>
<News hasArchived="true" page="7983" pageCount="10843" pageSize="10" timestamp="Sun, 27 Sep 2026 11:40:09 -0400" url="https://my3.my.umbc.edu/posts.xml?mode=activity&amp;page=7983&amp;range=2">
<NewsItem contentIssues="false" id="40306" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40306">
<Title>Cross-Origin Resource Sharing (CORS) is a W3C Recommendation</Title>
<Body>
<![CDATA[
    <div class="html-content"><p>The <a href="http://www.w3.org/2008/webapps/" rel="nofollow external" class="bo">Web Applications (WebApps) Working Group</a> and the <a href="http://www.w3.org/2011/webappsec/" rel="nofollow external" class="bo">Web Application Security (WebAppSec) Working Group</a> have published today a Recommendation of <a href="http://www.w3.org/TR/2014/REC-cors-20140116/" rel="nofollow external" class="bo">Cross-Origin Resource Sharing</a> (CORS). This document defines a mechanism to enable client-side cross-origin requests. Specifications that enable an API to make cross-origin requests to resources can use the algorithms defined by this specification. If such an API is used on <a href="http://example.org">http://example.org</a> resources, a resource on <a href="http://hello-world.example">http://hello-world.example</a> can opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: <a href="http://example.org">http://example.org</a> as response header), which would allow that resource to be fetched cross-origin from <a href="http://example.org">http://example.org</a>. Learn more about the <a href="https://www.w3.org/2006/rwc/" rel="nofollow external" class="bo">Rich Web Client Activity</a> and the <a href="https://www.w3.org/Security/" rel="nofollow external" class="bo">Security Activity</a>.</p></div>
]]>
</Body>
<Summary>The Web Applications (WebApps) Working Group and the Web Application Security (WebAppSec) Working Group have published today a Recommendation of Cross-Origin Resource Sharing (CORS). This document...</Summary>
<Website>http://www.w3.org/blog/news/archives/3593</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40306/guest@my.umbc.edu/2f6c47f283d8e963c0231ea6247f1ebc/api/pixel</TrackingUrl>
<Tag>css</Tag>
<Tag>design</Tag>
<Tag>development</Tag>
<Tag>home-page-stories</Tag>
<Tag>html</Tag>
<Tag>javascript</Tag>
<Tag>mysql</Tag>
<Tag>publication</Tag>
<Tag>sql</Tag>
<Tag>top-story</Tag>
<Tag>w3</Tag>
<Tag>web</Tag>
<Tag>web-design-and-applications</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 12:21:02 -0500</PostedAt>
</NewsItem>

<NewsItem contentIssues="true" id="40307" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40307">
<Title>Bits: Facebook Rolls Out Its Version of Trending Topics</Title>
<Body>
<![CDATA[
    <div class="html-content">The social network is adding a module to its news feed that will suggest popular topics of conversation on the service, customized for each user.<br><div><table border="0"><tbody><tr><td>
    <a href="http://share.feedsportal.com/share/twitter/?u=http%3A%2F%2Fbits.blogs.nytimes.com%2F2014%2F01%2F16%2Ffacebook-rolls-out-its-version-of-trending-topics%2F%3Fpartner%3Drss%26emc%3Drss&amp;t=Bits%3A+Facebook+Rolls+Out+Its+Version+of+Trending+Topics" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/twitter.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/facebook/?u=http%3A%2F%2Fbits.blogs.nytimes.com%2F2014%2F01%2F16%2Ffacebook-rolls-out-its-version-of-trending-topics%2F%3Fpartner%3Drss%26emc%3Drss&amp;t=Bits%3A+Facebook+Rolls+Out+Its+Version+of+Trending+Topics" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/facebook.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/linkedin/?u=http%3A%2F%2Fbits.blogs.nytimes.com%2F2014%2F01%2F16%2Ffacebook-rolls-out-its-version-of-trending-topics%2F%3Fpartner%3Drss%26emc%3Drss&amp;t=Bits%3A+Facebook+Rolls+Out+Its+Version+of+Trending+Topics" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/linkedin.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/gplus/?u=http%3A%2F%2Fbits.blogs.nytimes.com%2F2014%2F01%2F16%2Ffacebook-rolls-out-its-version-of-trending-topics%2F%3Fpartner%3Drss%26emc%3Drss&amp;t=Bits%3A+Facebook+Rolls+Out+Its+Version+of+Trending+Topics" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/googleplus.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/email/?u=http%3A%2F%2Fbits.blogs.nytimes.com%2F2014%2F01%2F16%2Ffacebook-rolls-out-its-version-of-trending-topics%2F%3Fpartner%3Drss%26emc%3Drss&amp;t=Bits%3A+Facebook+Rolls+Out+Its+Version+of+Trending+Topics" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/email.png" style="max-width: 100%; height: auto;"></a>
    </td></tr></tbody></table></div>
    <br><br><a href="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/1/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/1/rc.img" style="max-width: 100%; height: auto;"></a><br><a href="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/2/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/2/rc.img" style="max-width: 100%; height: auto;"></a><br><a href="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/3/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/sc/4/rc/3/rc.img" style="max-width: 100%; height: auto;"></a><br><br><a href="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/a2.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/187505040497/u/0/f/640387/c/34625/s/35fdf002/a2.img" style="max-width: 100%; height: auto;"></a>
    </div>
]]>
</Body>
<Summary>The social network is adding a module to its news feed that will suggest popular topics of conversation on the service, customized for each user.      </Summary>
<Website>http://bits.blogs.nytimes.com/2014/01/16/facebook-rolls-out-its-version-of-trending-topics/?partner=rss&amp;emc=rss</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40307/guest@my.umbc.edu/547a5ce7a1eace4d4ab9a05291c176ff/api/pixel</TrackingUrl>
<Tag>facebook-inc</Tag>
<Tag>facebook-inc-fb-nasdaq</Tag>
<Tag>new</Tag>
<Tag>social</Tag>
<Tag>social-media</Tag>
<Tag>technology</Tag>
<Tag>twitter</Tag>
<Tag>twitter-twtr-nyse</Tag>
<Tag>york</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 12:10:09 -0500</PostedAt>
<EditAt>Thu, 16 Jan 2014 15:39:47 -0500</EditAt>
</NewsItem>

<NewsItem contentIssues="true" id="40308" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40308">
<Title>What is Unobtrusive JavaScript and Why it&#8217;s Important?</Title>
<Body>
<![CDATA[
    <div class="html-content">
    <p>Unobtrusive JavaScript is a best practice methodology for attaching JavaScript to the front-end of a website. It’s an ideal to strive toward and something we should bear in mind whenever we’re adding JavaScript to a site.</p>
    <p>It is the separation of behaviour from markup or structure. Just like the CSS gurus of old taught us there should be a separation of layout from markup, there should be a separation of behaviour from markup. That’s HTML for the content and structure of the document, CSS for the layout and style, and Unobtrusive JavaScript for behaviour and interactivity. Simple.</p>
    <h2>What?</h2>
    <p>It boils down to this: your site, and it’s content, should still be accessible when JavaScript is unavailable – the only way to guarantee this is by employing Unobtrusive JavaScript techniques.</p>
    <p>Adding JavaScript to your site should be an additive process, bringing better experiences to those who have the capabilities of running your code, not a destructive one for those who for whatever reason have JavaScript disabled or blocked or not fully implemented. This is known as <a href="https://en.wikipedia.org/wiki/Progressive_enhancement" rel="nofollow external" class="bo">Progressive Enhancement</a>.</p>
    <h2>How?</h2>
    <p>Let’s look at an example where you want to open a popup window for external links on your site.</p>
    <h3>The Downright Hackish Way</h3>
    <p>The first way is the downright hackish way &amp;emdash; a technique that early on gave JavaScript a bad reputation &amp;emdash; of hijacking the <code>href</code> attribute on all anchor elements on the site.</p>
    <pre><code>&lt;a href="javascript:window.open('<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript')%22&gt;W3C">http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript')"&gt;W3C</a> Article&lt;/a&gt; &#x000A;    </code></pre>
    <p>This poses a big problem if JavaScript is unavailable. The link won’t work! It’s not a very maintainable technique either, since changing your linking technique would require you to change every external link.</p>
    <h3>The Less Obtrusive Way</h3>
    <p>The less obtrusive way would be to add the JavaScript to the <code>onclick</code> handler for every link.</p>
    <pre><code>&lt;a href="<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript">http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript</a>" onclick="window.open('<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript');return">http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript');return</a> false;"&gt;W3C Article&lt;/a&gt; &#x000A;    </code></pre>
    <p>While this is still a maintenance nightmare, it does work if the browser’s JavaScript is disabled. Without JavaScript the user won’t follow the link in a new window, but will be able to follow the link through the default link behavior.</p>
    <h3>The Unobtrusive Way</h3>
    <p>Now to the best way, the unobtrusive way. We’ll add a <code>class</code> attribute to all links that are to open in a new window. This is just like how we’d add a <code>class</code> to style similar elements. However, in this case we’ll add a <code>class</code> to add behavior to similar elements. Let’s add a class of <code>new_window</code> to our links.</p>
    <pre><code>&lt;a href="<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript">http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript</a>" class="new_window"&gt;W3C Article&lt;/a&gt;&#x000A;    &#x000A;    &lt;a href="<a href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript">https://en.wikipedia.org/wiki/Unobtrusive_JavaScript</a>" class="new_window"&gt;Wikipedia Article&lt;/a&gt;&#x000A;    </code></pre>
    <p>Now we have two links, both with the class <code>new_window</code>, but with no JavaScript. As a bonus we could style <code>new_window</code> links differently too, but that’s not what we’re doing right now, we’re adding behaviour.</p>
    <p>Next, create a separate JavaScript file called <code>app.js</code>. Let’s use JavaScript to get all the elements with the class of <code>new_window</code>. We do this with the following code:</p>
    <pre><code>    var anchors = document.getElementsByClassName("new_window");&#x000A;    </code></pre>
    <p>Now we have a variable <code>anchors</code> with all anchors on the document with the class of <code>new_window</code>. Now we can iterate over all the anchors and add a function to the <code>onclick</code> attribute.</p>
    <pre><code>for (var i=0; i &lt; anchors.length; i++) {&#x000A;        anchors[i].onclick = function() { };&#x000A;    };&#x000A;    </code></pre>
    <p>We can also add a little bit of code to open the link in new window.</p>
    <pre><code>for (var i=0; i &lt; anchors.length; i++) {&#x000A;        anchors[i].onclick = function() {&#x000A;            window.open(this.href);&#x000A;            return false;&#x000A;        };&#x000A;    };&#x000A;    </code></pre>
    <p>We’re using <code>this.href</code> instead of typing out the URL string (like <code>"<a href="http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript">http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript</a>"</code>) because now the same code is being used on multiple links. Since we’re binding a function to <code>onclick</code> we have the <code>this</code> object to play with. In the <code>on click</code> handler, the <code>this</code> object is the given anchor that the <code>onclick</code> function is bound to. So <code>this.href</code> is the <code>href</code> of the link that has been clicked.</p>
    <h2>Why?</h2>
    <p>There are a number of reasons why you’d want to use Unobtrusive JavaScript. From the how-to above you can see that maintenance and updating functionality is a lot easier. But the benefits of being unobtrusive aren’t purely selfish. It’s about the user.</p>
    <p>When a user comes to your site you can’t guarantee the device, browser or connection they have to your site. For example, older browsers wouldn’t be able to execute the above code since they don’t support the <code>getElementsByClassName</code> method. This would stop the script from being executed. Still they will be able to go to the site and follow the link in spite of getting a JavaScript warning in the status bar of their browser. Ideally, to be truly unobtrusive, you’d write some more code to fall back on to with older browsers, or alternatively use something like <a href="http://blog.teamtreehouse.com/beginners-guide-to-jquery" rel="nofollow external" class="bo">jQuery</a>.</p>
    <p>In the case of connectivity, JavaScript files should be included at the bottom of the page, giving more weighting to the HTML document and stylesheets to be downloaded first. Say your user is connecting via a mobile device with flaky connectivity. The HTML and CSS may get downloaded before the connection disconnects and fails to download the JavaScript files. You don’t want this mobile user to have a poorer experience than they’re already having. Imagine someone accessing your site from work and their somewhat paranoid system administrators strip out all JavaScript tags through their proxy or disable JavaScript on all their computers. The user is totally out of control in this case and they shouldn’t be penalised by not having their experience hindered by your inability to provide content or functionality that would work in their scenario.</p>
    <p>Finally there are cases where screen-readers for visually impaired users disable or don’t fully implement JavaScript, so it’s important to make your content accessible. An accessible site is also a search engine optimised site. Having your content there-and-then on your site, behind working links, will guarantee the even the least sophisticated <a href="http://en.wikipedia.org/wiki/Web_crawler" rel="nofollow external" class="bo">search engine spiders</a> will be able to index your site and it’s contents. An indexed site is a visited site.</p>
    <h2>Conclusion</h2>
    <p>The astute readers will have noticed that even the less selfish reasons will ultimately pay off in your favor. Being unobtrusive on your own, your employer’s, or your client’s projects will ultimately bring more users and paying customers to your site. It’s win-win.</p>
    <p>In your next project, when adding interactive behavior, why not try to employ unobtrusive techniques to your JavaScript code?</p>
    <p>You can check out the sample code on <a href="https://github.com/chalkers/unobtrusive_js" rel="nofollow external" class="bo">github</a> or download the source files in a <a href="https://github.com/chalkers/unobtrusive_js/archive/master.zip" rel="nofollow external" class="bo">zip</a> file.</p>
    <p>The post <a href="http://blog.teamtreehouse.com/unobtrusive-javascript-important" rel="nofollow external" class="bo">What is Unobtrusive JavaScript and Why it’s Important?</a> appeared first on <a href="http://blog.teamtreehouse.com" rel="nofollow external" class="bo">Treehouse Blog</a>.</p>
    </div>
]]>
</Body>
<Summary>Unobtrusive JavaScript is a best practice methodology for attaching JavaScript to the front-end of a website. It’s an ideal to strive toward and something we should bear in mind whenever we’re...</Summary>
<Website>http://feedproxy.google.com/~r/teamtreehouse/~3/vJUjDloGsk8/unobtrusive-javascript-important</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40308/guest@my.umbc.edu/fb4ed0c2cea84c2471e1fdf2512af597/api/pixel</TrackingUrl>
<Tag>android</Tag>
<Tag>code</Tag>
<Tag>css</Tag>
<Tag>design</Tag>
<Tag>development</Tag>
<Tag>html</Tag>
<Tag>ios</Tag>
<Tag>javascript</Tag>
<Tag>jquery</Tag>
<Tag>responsive</Tag>
<Tag>seo</Tag>
<Tag>unobtrusive-javascript</Tag>
<Tag>web</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 12:00:28 -0500</PostedAt>
</NewsItem>

<NewsItem contentIssues="false" id="40304" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40304">
<Title>Three Linked Data Vocabularies are W3C Recommendations</Title>
<Body>
<![CDATA[
    <div class="html-content">
    <p>Three Recommendations were published today to enhance data interoperability, especially in government data. Each one specifies an RDF vocabulary (a set of properties and classes) for conveying a particular kind of information:</p>
    <ul>
    <li>The <a href="http://www.w3.org/TR/2014/REC-vocab-dcat-20140116/" rel="nofollow external" class="bo">Data Catalog (DCAT) Vocabulary</a> is used to provide information about available data sources. When data sources are described using DCAT, it becomes much easier to create high-quality integrated and customized catalogs including entries from many different providers. Many national data portals are already using DCAT.</li>
    <li>The <a href="http://www.w3.org/TR/2014/REC-vocab-data-cube-20140116/" rel="nofollow external" class="bo">Data Cube Vocabulary</a> brings the cube model underlying SDMX (Statistical Data and Metadata eXchange, a popular ISO standard) to Linked Data. This vocabulary enables statistical and other regular data, such as measurements, to be published and then integrated and analyzed with RDF-based tools.</li>
    <li>The <a href="http://www.w3.org/TR/2014/REC-vocab-org-20140116/" rel="nofollow external" class="bo">Organization Ontology</a> provides a powerful and flexible vocabulary for expressing the official relationships and roles within an organization. This allows for interoperation of personnel tools and will support emerging socially-aware software.</li>
    </ul>
    <p>All three vocabularies have been developed by the <a href="http://www.w3.org/2011/gld/" rel="nofollow external" class="bo">Government Linked Data Working Group</a>, but they are applicable beyond just government data. For a list of data sources or software known to be using these vocabularies, see the “Implementation Report” linked from each document. Learn more about the <a href="http://www.w3.org/2013/data/" rel="nofollow external" class="bo">Data Activity</a>.</p>
    </div>
]]>
</Body>
<Summary>Three Recommendations were published today to enhance data interoperability, especially in government data. Each one specifies an RDF vocabulary (a set of properties and classes) for conveying a...</Summary>
<Website>http://www.w3.org/blog/news/archives/3591</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40304/guest@my.umbc.edu/0139603c45e6cf194fce796916541101/api/pixel</TrackingUrl>
<Tag>css</Tag>
<Tag>design</Tag>
<Tag>development</Tag>
<Tag>home-page-stories</Tag>
<Tag>html</Tag>
<Tag>javascript</Tag>
<Tag>mysql</Tag>
<Tag>publication</Tag>
<Tag>semantic-web</Tag>
<Tag>sql</Tag>
<Tag>w3</Tag>
<Tag>web</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 11:45:26 -0500</PostedAt>
</NewsItem>

<NewsItem contentIssues="false" id="40303" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40303">
<Title>CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More</Title>
<Body>
<![CDATA[
    <div class="html-content">
    <p><em>The following is a guest post by <a href="http://zachsaucier.com/" rel="nofollow external" class="bo">Zach Saucier</a>. Zach cooks up some pretty inspiring animations over <a href="http://codepen.io/Zeaklous/" rel="nofollow external" class="bo">on CodePen</a>. I couldn't be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed.</em></p>
    <p></p>
    <p>I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you. </p>
    <h3>#1) Jump to another state mid-animation</h3>
    <p>CSS animation makes it easy to transition properties to a new value over time. They also have the ability to <em>jump</em> properties to a new value virtually instantly. The trick is to use two keyframes with a very small difference, around <code>.001%</code> works well.</p>
    <pre><code>@keyframes toggleOpacity {&#x000A;      50% { opacity: 1; } /* Turn off */&#x000A;      50.001% { opacity: 0.4; }&#x000A;    &#x000A;      /* Keep off state for a short period */&#x000A;    &#x000A;      52.999% { opacity: 0.4; } /* Turn back on */&#x000A;      53% { opacity: 1; }&#x000A;    }</code></pre>
    <p>The following is an extreme example of this, toggling opacity and a text-shadow to mimic a flickering billboard light. </p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/dIomg" rel="nofollow external" class="bo">No Vacancy 404 CSS Only</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a>.</p>
    <h3>#2) Negative animation delays</h3>
    <p>A positive animation delay is where the animation waits a certain amount of time to begin. A <em>negative</em> animation delay starts the animation immediately, as if that amount of time has already gone by. In other words, start the animation at a state further into the animation cycle. This allows animations to be reused across several elements, given all that needs changing is the timing.</p>
    <p>Here is an example of that where each circle begins immediately at a different state in the animation cycle: </p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/dirzc" rel="nofollow external" class="bo">Circle Snake</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a></p>
    <h3>#3) Proportional animations</h3>
    <p>I try to make everything that I put into production be as responsive as possible, including my animations. Responsiveness for CSS animations is not possible for all animations I have created, but sometimes it is, using percentages and other relative units.</p>
    <p>In many of my animations, I use elements like circles and squares which need the a proportional width and height. You might think I need to use fixed width &amp; height values to keep them that way, but that's not the case! I am able to create them using a percentage width, zero height, and percentage padding. The padding-bottom is the trick to keep it proportional to the width, like this:</p>
    <pre><code>.container {&#x000A;      position: relative;&#x000A;      display: block;&#x000A;      width: 100%;&#x000A;      height: 0;&#x000A;      padding-bottom: 100%;&#x000A;    }</code></pre>
    <p>You can see this in practice on the following demo by changing the size of the window it is in. The demo also makes use of negative animation delays.</p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/pcfCJ" rel="nofollow external" class="bo">Responsive CSS bars</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a>.</p>
    <h3>#4) Changing transform-origin mid-animation</h3>
    <p>While working on one of my animations, I was surprised to find out that not only can <a href="http://css-tricks.com/almanac/properties/t/transform-origin/" rel="nofollow external" class="bo"><code>transformation-origin</code></a> be changed mid-animation, it is also animatable! In the example below, this allows us to create one animation using rotations on different axes instead of using four separate animations.</p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/jiDHL" rel="nofollow external" class="bo">Change transformation-origin mid animation</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a></p>
    <p>The downside to this trick is that you can't use <code>animation-mode: forwards;</code> for only a part of an animation. This means that we have to re-position the element to an equivalent of its state before applying the change in <code>transformation-origin</code>. In the above example, this is done by using translates to mimic the rotation's effects. However, this technique can get tedious on more complex examples, <a href="http://codepen.io/Zeaklous/pen/fsGvH" rel="nofollow external" class="bo">as seen here</a>.</p>
    <h3>#5) Negative transform-origins</h3>
    <p>You are able to set a negative <code>transform-origin</code>, which is useful for things like creating circular movement paths. Instead of specifying specific translate and rotation values using one element to create circular animations <a href="http://lea.verou.me/2012/02/moving-an-element-along-a-circle/" rel="nofollow external" class="bo">as Lea Verou describes</a>, we can do it much more simply by using negative <code>transform-origin</code> values in addition to a second element or pseudo-element (one element if we want the element to rotate as well as move in a circular path). By using varying values of a negative transform origin, we can reuse the same animation for multiple elements while still retaining circular motion for each.</p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/rsvgK" rel="nofollow external" class="bo">CSS Circular Motion Technique</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a>.</p>
    <h3>#6) Box shadow magic</h3>
    <p>For animations of simple no-content shapes, <a href="http://css-tricks.com/almanac/properties/b/box-shadow/" rel="nofollow external" class="bo"><code>box-shadow</code></a> is quite useful. The box-shadow property can <a href="http://css-tricks.com/snippets/css/multiple-borders/" rel="nofollow external" class="bo">create multiple borders around elements</a>. That idea, combined with some displacement, can create new animatable "elements" out of no additional HTML elements. This enables us to create the following animation, which appears to be six circular elements rotating circularly, but is in fact one element with some offset box-shadow shapes.</p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/lmbJy" rel="nofollow external" class="bo">Single element color loader</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a></p>
    <p>Sadly, percents are not supported by any box-shadow properties so they are not as easily responsive as a native HTML element. However they can still be changed manually in an animation or by using <code>transform:scale(n)</code> on the actual HTML element which they are a part of. </p>
    <h3>#7) Using pseudo-elements</h3>
    <p>Similarly with box-shadows, pseudo elements can be used to add more content to the appearance of a single element. They can have separate animations from their parent, their own box-shadows, and are very similar to being child elements of without the HTML markup. This let's us create amazing single element creations like the one below.</p>
    <p>See the Pen <a href="http://codepen.io/Zeaklous/pen/akxqt" rel="nofollow external" class="bo">Single Element gif Recreation</a> by Zach Saucier (<a href="http://codepen.io/Zeaklous" rel="nofollow external" class="bo">@Zeaklous</a>) on <a href="http://codepen.io" rel="nofollow external" class="bo">CodePen</a></p>
    <p>In the example, all of the large circles around the middle flashing circle, as well as two of the smaller circles on the rim (opposite from each other) are box-shadows on the main element. The other two small circles are part of a pseudo-element's box-shadow and the ring made of dashes is an SVG applied as a background on the other pseudo element. </p>
    <hr>
    <h3>Some other things to note</h3>
    <h4>Use transforms when you can</h4>
    <p>Transforms perform better than their non-transform counterparts as <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" rel="nofollow external" class="bo">Paul Irish has shown</a> (<a href="http://css-tricks.com/tale-of-animation-performance/" rel="nofollow external" class="bo">also</a>). Primarily this means using scale and translate over changing the dimensions or top/left values. </p>
    <p>Transforms also allow for more responsive design, allowing things such as <code>scale</code> to be used relative to their original size, as is shown in <a href="http://codepen.io/amos/pen/Bypur" rel="nofollow external" class="bo">this animation</a> by Amos.</p>
    <p>Not using transforms can also cause problems that are hard to catch. For example, in <a href="http://jsfiddle.net/cL5bW/" rel="nofollow external" class="bo">this animation</a> of mine the elements were being colored incorrectly in Chrome although the values themselves were correct. After <a href="http://jsfiddle.net/qA4V9/" rel="nofollow external" class="bo">switching it to use transforms</a> all my problems were solved.</p>
    <h4>z-index can cause problems</h4>
    <p>I probably spend more time fixing <code>z-index</code> issues with my animations more than any other issue. Z-indexes are handled differently from vendor to vendor. In animations, the primary difference is that Mozilla does not animate z-index values, they have elements jump from one z-index to the next, whereas vendors like webkit do animate the z-index value.</p>
    <p>Another thing to note is that if one wants their pseudo elements to appear behind their parent element, the pseudo element must have a negative z-index and the parent cannot have a stacking other than the default, which means you can't apply a z-index or anything else that takes the parent out of its natural stacking context. </p>
    <p>One last trick dealing with z-index is one that deals with opacity. Whenever an element is given an opacity other than the default "1", it gains its own stacking context. For more information on this, check out <a href="http://philipwalton.com/articles/what-no-one-told-you-about-z-index/" rel="nofollow external" class="bo">Philip Walton's post</a></p>
    <h4>Get inspired</h4>
    <p>Whether it's something you see in the real world, an interesting web page that you find online, part of a video intro, a gif, or something else entirely, find things that you think may be possible to create and try to do so! </p>
    <p>I have found that not looking at how the original author created it enables me to learn, to create it in a unique style, and sometimes even do it in a more efficient manor. Even if I end up failing at my original intention, I always become more comfortable with or learn more about the language I'm using. Often times I have something to show for it, even if it's not as grand as I would had originally hoped. Other times I'm completely surprised by how awesome my creation is when I didn't even mean for it to be! </p>
    <p>I hope that this article helps you construct more awesome creations, even if you learned nothing from the specific techniques!</p>
    <hr>
    
    <p><small><a href="http://css-tricks.com/css-animation-tricks/" rel="nofollow external" class="bo">CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More</a> is a post from <a href="http://css-tricks.com" rel="nofollow external" class="bo">CSS-Tricks</a></small></p>
    </div>
]]>
</Body>
<Summary>The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn't be happier that he wanted to share some of the tricks he uses to create...</Summary>
<Website>http://css-tricks.com/css-animation-tricks/</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40303/guest@my.umbc.edu/a6bf7add9ccf8f5a1592d24c1e88ee41/api/pixel</TrackingUrl>
<Tag>article</Tag>
<Tag>css</Tag>
<Tag>html</Tag>
<Tag>javascript</Tag>
<Tag>mysql</Tag>
<Tag>php</Tag>
<Tag>sql</Tag>
<Tag>tricks</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 11:24:14 -0500</PostedAt>
<EditAt>Thu, 16 Jan 2014 11:24:14 -0500</EditAt>
</NewsItem>

<NewsItem contentIssues="false" id="40301" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40301">
<Title>JSON-LD is a W3C Recommendation</Title>
<Body>
<![CDATA[
    <div class="html-content">
    <p>The <a href="http://www.w3.org/2011/rdf-wg/" rel="nofollow external" class="bo">RDF Working Group</a> has published two Recommendations today:</p>
    <ul>
    <li>
    <a href="http://www.w3.org/TR/2014/REC-json-ld-20140116/" rel="nofollow external" class="bo">JSON-LD 1.0</a>. JSON is a useful data serialization and messaging format. This specification defines JSON-LD, a JSON-based format to serialize Linked Data. The syntax is designed to easily integrate into deployed systems that already use JSON, and provides a smooth upgrade path from JSON to JSON-LD. It is primarily intended to be a way to use Linked Data in Web-based programming environments, to build interoperable Web services, and to store Linked Data in JSON-based storage engines.</li>
    <li>
    <a href="http://www.w3.org/TR/2014/REC-json-ld-api-20140116/" rel="nofollow external" class="bo">JSON-LD 1.0 Processing Algorithms and API</a>. This specification defines a set of algorithms for programmatic transformations of JSON-LD documents. Restructuring data according to the defined transformations often dramatically simplifies its usage. Furthermore, this document proposes an Application Programming Interface (API) for developers implementing the specified algorithms.</li>
    </ul>
    <p>Learn more about the <a href="/2013/data/" rel="nofollow external" class="bo">Data Activity</a>.</p>
    </div>
]]>
</Body>
<Summary>The RDF Working Group has published two Recommendations today:     JSON-LD 1.0. JSON is a useful data serialization and messaging format. This specification defines JSON-LD, a JSON-based format to...</Summary>
<Website>http://www.w3.org/blog/news/archives/3589</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40301/guest@my.umbc.edu/24576f9de0638194008e289f5036f852/api/pixel</TrackingUrl>
<Tag>css</Tag>
<Tag>design</Tag>
<Tag>development</Tag>
<Tag>home-page-stories</Tag>
<Tag>html</Tag>
<Tag>javascript</Tag>
<Tag>mysql</Tag>
<Tag>semantic-web</Tag>
<Tag>sql</Tag>
<Tag>w3</Tag>
<Tag>web</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 11:17:29 -0500</PostedAt>
</NewsItem>

<NewsItem contentIssues="true" id="40305" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40305">
<Title>12 inspirational hand-lettering projects</Title>
<Body>
<![CDATA[
    <div class="html-content">
    <p><img alt="ht_thumbnail" src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_thumbnail.jpg" width="200" height="160" style="max-width: 100%; height: auto;">When it comes to lettering, there’s something about a handmade project that just stops us in our tracks. In this day and age, with so many beautiful fonts accessible to us at just the press of a button, the fact that there are still amazing designers willing to go above and beyond the norm and hand-letter their work impresses us to no end.</p> <p>This dozen projects are no different; each of them made us stop and say, “Wow.” We hope you’ll feel the same way.</p> <h1>Lisa Nemetz’s identity for VQV</h1> <p>Argentina-based designer Lisa Nemetz’s <a href="http://www.behance.net/gallery/VQV-Identity/13178623" rel="nofollow external" class="bo">identity for VQV,</a> an organic restaurant, positively demands attention. The masterful, almost casual brushwork perfectly evokes the texture and vibrance of the food on offer.</p> <p><a href="http://www.behance.net/gallery/VQV-Identity/13178623" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_001.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Bryan Patrick Todd’s Shelby Park mural</h1> <blockquote> <p>I focused on a statement that reflected Shelby Park’s positive outlook and growth as a tight-knit community.</p> </blockquote> <p>Louisville’s own <a href="http://bryanpatricktodd.com/blog/shelbyparkmural" rel="nofollow external" class="bo">Bryan Patrick Todd</a>, a graphic designer and artist, documented the process of creating this gorgeous mural he was commissioned to create. Once the initial design and mockups were completed, he worked with a sign painter to see that the mural accurately reflected his design.</p> <p><a href="http://bryanpatricktodd.com/blog/shelbyparkmural" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_002.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Jason Vandenberg’s hand-lettered projects</h1> <p>Toronto-based artist and graphic designer <a href="http://www.jasonvandenberg.com/#/hand-lettering-work01/" rel="nofollow external" class="bo">Jason Vandenberg</a> initially caught our eye with his hand-drawn project entitled <a href="http://instagram.com/p/f81MwjOdpU/" rel="nofollow external" class="bo">Earn Your Sleep</a> on Instagram. On his website, however, Vandenberg documents each step of his process, from initial sketches and drafts, to the final, vectorized results. Worth a look!</p> <p><a href="http://www.jasonvandenberg.com/#/hand-lettering-work01/" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_003.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Thomas Pena’s hand-lettered quotes</h1> <p>Hailing from Orlando, Florida, Thomas Pena’s impressive <a href="http://www.behance.net/gallery/Hand-Lettering/11153723" rel="nofollow external" class="bo">Behance profile</a> showcases a knack for typography that extends across a variety of media, along with an arresting capability for hand lettering. His set of three hand-lettered inspirational quotes, edited using a faux-chalkboard effect, would make a fantastic wall decal or poster triptych.</p> <p><a href="http://www.behance.net/gallery/Hand-Lettering/11153723" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_004.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Russell Shaw’s hand-lettering for the Illumination project</h1> <p>The Illumination Project is a DVD study series for small groups, developed from the video content of a live event held in Portland, Oregon. Russell Shaw’s <a href="http://www.behance.net/gallery/The-Illumination-Project/12118723" rel="nofollow external" class="bo">hand-lettering</a> takes it beyond the ordinary and creates an impactful and memorable product for young adults.</p> <p><a href="http://www.behance.net/gallery/The-Illumination-Project/12118723" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_007.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Nina Harcus’s Type Delight</h1> <p>With this project, <a href="http://www.ninaharcus.com/Type-Delight" rel="nofollow external" class="bo">Nina Harcus,</a> a designer and foodie, features handmade typography visuals using ingredients like flour, pie dough, and other food items, to accompany the recipes in a book. These handmade visuals tell the story of a Patisserie chef named Marcelle, as he begins to fall in love with typography. As fans of typography and delicious food, we couldn’t overlook this tasty treat!</p> <p><a href="http://www.ninaharcus.com/Type-Delight" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_005.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>All Tropicana Co’s playlist project</h1> <p>Hailing from Monterrey, Mexico, graphic designer and illustrator <a href="http://www.behance.net/alltropicanacompany" rel="nofollow external" class="bo">Robba Saldaña</a> has set out on a mission to create a different typographical representation of various songs by internationally renowned artists spanning the last several decades, and the results are astounding. From his depiction of Johnny Cash’s <em>Hurt</em> to The Chemical Brothers’ <em>Galvanize</em>, this collection is definitely one to watch.</p> <p><a href="http://www.behance.net/alltropicanacompany" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_006.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Martina Flor’s <em>Completely London</em> cover</h1> <blockquote> <p>The brief was to create the cover artwork with headlines done with a visual that ties to learning.</p> </blockquote> <p>When <a href="http://www.augustmedia.com" rel="nofollow external" class="bo">August Media</a> made the decision to approach Berlin’s Martina Flor for the cover artwork for the magazine <a href="http://www.martinaflor.com/portfolio/completely-london/" rel="nofollow external" class="bo">Completely London,</a> they inspired one of the more notable covers we’ve seen to date. The minor irregularities in the lettering make it clear that Flor took the time to create this entire piece by hand, an artistic undertaking that speaks volumes about her commitment to her work.</p> <p><a href="http://www.martinaflor.com/portfolio/completely-london/" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_008.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>MASH’s Chalk it Up collaboration</h1> <p>MASH, the collective of graphic designers and typographers Mary Faber, Alice Lo, Saranna Drury, and Haylie Gray, created <a href="http://www.behance.net/gallery/Chalk-it-Up/7098355" rel="nofollow external" class="bo">this collaborative masterpiece</a> showcasing lyrics from New Zealand musician Dave Dobbyn’s song <em>Slice of Heaven</em> over a weekend. Their <a href="http://mashfoundry.wordpress.com/2013/02/07/chalk-it-up/" rel="nofollow external" class="bo">blog entry</a> about the piece describes the process they used to create such a large-scale monument to chalkboard typography.</p> <blockquote> <p>MASH has been long time fans of Dana Tanamachi’s awesome chalkboard type…and we wanted to follow in her footsteps and give it a go ourselves. …We were all allocated a word or two to design digitally in Adobe Illustrator and then we used a projector to project our designs onto the custom built wall. Next we sketched our letters onto the blackboard and chalked it up!!</p> </blockquote> <p>Be sure to watch the video for a behind-the-scenes glimpse into the work that went into this amazing project.</p> <p><a href="http://www.behance.net/gallery/Chalk-it-Up/7098355" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_009.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Jason Carne’s vintage hand-lettering</h1> <blockquote> <p>The act of being “taught” how to be an artist always felt silly and counter-productive to my creative process… I decided early on that I wanted to teach myself everything I possibly could on my own to ensure that my approach and style was completely my own[.]</p> </blockquote> <p>New Jersey designer <a href="http://www.jasoncarne.com" rel="nofollow external" class="bo">Jason Carne</a> may only be in his twenties, but his hand-lettered designs seem to have traveled forward through time. From film props, to t-shirts for Def Leppard, to beautifully imagined designs for small local businesses, be sure to check out the entirety of his collection.</p> <p><a href="http://www.jasoncarne.com/" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_010.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Yulia Brodskaya’s hand-crafted typography collection</h1> <p>Russian-born artist <a href="http://www.artyulia.com" rel="nofollow external" class="bo">Yulia Brodskaya</a> has a unique gift for folding paper into visually compelling creations. Formerly called “quilling,” this paper-crafting technique is believed to have been used by monks and nuns in the Renaissance era when creating flourishes to adorn religious objects. Whether it’s her <a href="http://waveavenue.com/wp-content/uploads/2012/11/BrilliantQuillingArtworkofYuliaBrodskaya.jpeg" rel="nofollow external" class="bo">embellished version</a> of a snippet from a $5000 bill or her cover for <em>O</em> magazine, this collection of <em>papergraphy</em> (as Yulia herself has deemed it) is worthy of perusal.</p> <p><a href="http://www.artyulia.com/" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_011.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <h1>Axek Efremov’s doodles</h1> <p>So many great hand-lettering projects are the result of personal exploration. <a href="http://www.behance.net/gallery/CtrlDo/9746013" rel="nofollow external" class="bo">Axek’s creations,</a> many of which feature hand lettering, are beautifully executed, for no reason other than, in his words, to defy laziness.</p> <p><a href="http://www.behance.net/gallery/CtrlDo/9746013" rel="nofollow external" class="bo"><img src="http://netdna.webdesignerdepot.com/uploads/2014/01/ht_012.jpg" width="650" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"></a></p> <p> </p> <p><em><strong>Have you used hand-lettering in a project? How well does hand-lettering work online? Let us know your thoughts in the comments.</strong></em></p> <p><br><br> </p>
    <table width="100%"> <tbody>
    <tr> <td> <a href="http://www.mightydeals.com/deal/resize-sense-watermark-sense.html?ref=inwidget" rel="nofollow external" class="bo"><strong>Resize Sense + Watermark Sense for Mac – only $14!</strong></a> </td> <td> <a href="http://www.mightydeals.com/?ref=inwidget" rel="nofollow external" class="bo"><br> <img src="http://mightydeals.com/web/images/widget-logo.png" height="40" width="90" alt="12 inspirational hand lettering projects" style="max-width: 100%; height: auto;"><br> </a> </td> </tr> </tbody>
    </table> <p><br> </p> <a href="http://www.webdesignerdepot.com/2014/01/12-inspirational-hand-lettering-projects/" rel="nofollow external" class="bo">Source</a> <br><div><table border="0"><tbody><tr><td>
    <a href="http://share.feedsportal.com/share/twitter/?u=http%3A%2F%2Fwww.webdesignerdepot.com%2F2014%2F01%2F12-inspirational-hand-lettering-projects%2F&amp;t=12+inspirational+hand-lettering+projects" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/twitter.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/facebook/?u=http%3A%2F%2Fwww.webdesignerdepot.com%2F2014%2F01%2F12-inspirational-hand-lettering-projects%2F&amp;t=12+inspirational+hand-lettering+projects" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/facebook.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/linkedin/?u=http%3A%2F%2Fwww.webdesignerdepot.com%2F2014%2F01%2F12-inspirational-hand-lettering-projects%2F&amp;t=12+inspirational+hand-lettering+projects" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/linkedin.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/gplus/?u=http%3A%2F%2Fwww.webdesignerdepot.com%2F2014%2F01%2F12-inspirational-hand-lettering-projects%2F&amp;t=12+inspirational+hand-lettering+projects" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/googleplus.png" style="max-width: 100%; height: auto;"></a> <a href="http://share.feedsportal.com/share/email/?u=http%3A%2F%2Fwww.webdesignerdepot.com%2F2014%2F01%2F12-inspirational-hand-lettering-projects%2F&amp;t=12+inspirational+hand-lettering+projects" rel="nofollow external" class="bo"><img src="http://res3.feedsportal.com/social/email.png" style="max-width: 100%; height: auto;"></a>
    </td></tr></tbody></table></div>
    <br><br><a href="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/1/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/1/rc.img" style="max-width: 100%; height: auto;"></a><br><a href="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/2/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/2/rc.img" style="max-width: 100%; height: auto;"></a><br><a href="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/3/rc.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/sc/4/rc/3/rc.img" style="max-width: 100%; height: auto;"></a><br><br><a href="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/a2.htm" rel="nofollow external" class="bo"><img src="http://da.feedsportal.com/r/186529020306/u/49/f/661066/c/35285/s/35fd3339/a2.img" style="max-width: 100%; height: auto;"></a>
    </div>
]]>
</Body>
<Summary>When it comes to lettering, there’s something about a handmade project that just stops us in our tracks. In this day and age, with so many beautiful fonts accessible to us at just the press of a...</Summary>
<Website>http://rss.feedsportal.com/c/35285/f/661066/s/35fd3339/sc/4/l/0L0Swebdesignerdepot0N0C20A140C0A10C120Einspirational0Ehand0Elettering0Eprojects0C/story01.htm</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40305/guest@my.umbc.edu/6d15a52dbe3d059c61af5dcb157a2dcf/api/pixel</TrackingUrl>
<Tag>art</Tag>
<Tag>cool-typography</Tag>
<Tag>css</Tag>
<Tag>design</Tag>
<Tag>development</Tag>
<Tag>hand-crafted-design</Tag>
<Tag>hand-lettering</Tag>
<Tag>html</Tag>
<Tag>html5</Tag>
<Tag>illustrator</Tag>
<Tag>inspiration</Tag>
<Tag>javascript</Tag>
<Tag>lettering</Tag>
<Tag>lettering-in-branding</Tag>
<Tag>murals</Tag>
<Tag>mysql</Tag>
<Tag>oracle</Tag>
<Tag>photoshop</Tag>
<Tag>php</Tag>
<Tag>sql</Tag>
<Group token="retired-583">Web Developer - Build Group</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-583</GroupUrl>
<AvatarUrl>https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="original">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197</AvatarUrl>
<AvatarUrl size="medium">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197</AvatarUrl>
<AvatarUrl size="xsmall">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197</AvatarUrl>
<Sponsor>Web Developer - Build Group</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 11:15:54 -0500</PostedAt>
<EditAt>Thu, 16 Jan 2014 11:15:54 -0500</EditAt>
</NewsItem>

<NewsItem contentIssues="true" id="40299" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40299">
<Title>UMBC  Recognized as Tree Campus USA</Title>
<Body>
<![CDATA[
    <div class="html-content"><table width="600" border="0"><tbody>
    <tr><td><p><img width="150" height="24" alt="Arbor Day Foundation" src="http://i2.cmail2.com/ti/r/10/74B/282/031436/logo.png" style="max-width: 100%; height: auto;"></p></td></tr>
    <tr><td><p><img width="600" height="401" alt="Tree Campus USA" src="http://i1.cmail2.com/ei/r/A4/240/601/csimport/CopyofArbor_007.091403.jpg" style="max-width: 100%; height: auto;"></p></td></tr>
    <tr><td><table width="600" border="1"><tbody>
    <tr><td colspan="2">
    <p><strong><span>Congratulations
        on Receiving 2013 Tree Campus USA Recognition</span></strong></p>
    <p>Dear Tree Campus USA Contact,</p>
    <p>Congratulations to University of Maryland Baltimore County for earning
        2013 Tree Campus USA® recognition. Tree Campus USA, a national program
        launched in 2008 by the Arbor Day Foundation and Toyota, honors colleges
        and universities and their leaders for promoting healthy trees and engaging
        students and staff in the spirit of conservation.</p>
    <p>To obtain this distinction, University of Maryland Baltimore County has
        met the five core standards for sustainable campus forestry required by
        Tree Campus USA, including establishment of a tree advisory committee,
        evidence of a campus tree-care plan, dedicated annual expenditures for its
        campus tree program, an Arbor Day observance and the sponsorship of student
        service-learning projects. Your entire campus community should be proud of
        this sustained commitment to environmental stewardship.</p>
    <p>Two promotional items are being prepared for your campus to help
        publicize your new recognition. These include a customized press release
        for your communications contact and ceremonial letter for your
        president/chancellor (or the contact you listed in your application). Both
        items will be sent out to the respective individuals in the next 2-3 weeks.
        Your recognition materials will be shipped to your state coordinator to be
        distributed to you on or before your state's Arbor Day.</p>
    <p>Again, congratulations! Your diligence in improving the environment and
        quality of life at University of Maryland Baltimore County contributes to a
        healthier, more sustainable world for us all.</p>
    <p>Sincerely,<br>
        <img width="175" height="50" src="http://www.arborday.org/programs/treecampususa/images/mary-sweeney.png" style="max-width: 100%; height: auto;"><br>
        Mary Sweeney<br>
        Program Manager<br>
        Arbor Day Foundation</p>
    </td></tr>
    <tr>
    <td><p><strong><span>Contact us:</span></strong><span> <a title="Email Us" href="mailto:treecampus@arborday.org" rel="nofollow external" class="bo"><span><u>treecampus@arborday.org</u></span></a> </span></p></td>
    <td><p><span><a href="http://programs.forwardtomyfriend.com/r-tiwddlhhy-037F31EF-pgkjut-l-r" rel="nofollow external" class="bo"><u>Forward this to a friend.</u></a></span></p></td>
    </tr>
    </tbody></table></td></tr>
    </tbody></table></div>
]]>
</Body>
<Summary>Congratulations     on Receiving 2013 Tree Campus USA Recognition  Dear Tree Campus USA Contact,  Congratulations to University of Maryland Baltimore County for earning     2013 Tree Campus USA®...</Summary>
<Website>http://treecampus@arborday.org</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40299/guest@my.umbc.edu/ccb06b3122cb04d24d89b086e0a00bde/api/pixel</TrackingUrl>
<Group token="retired-459">Landscape Stewardship Committee</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-459</GroupUrl>
<AvatarUrl>https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/xsmall.png?1398962125</AvatarUrl>
<AvatarUrl size="original">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/original.png?1398962125</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/xxlarge.png?1398962125</AvatarUrl>
<AvatarUrl size="xlarge">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/xlarge.png?1398962125</AvatarUrl>
<AvatarUrl size="large">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/large.png?1398962125</AvatarUrl>
<AvatarUrl size="medium">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/medium.png?1398962125</AvatarUrl>
<AvatarUrl size="small">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/small.png?1398962125</AvatarUrl>
<AvatarUrl size="xsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/xsmall.png?1398962125</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/459/697a571d88c53996edc8d72759d40b1c/xxsmall.png?1398962125</AvatarUrl>
<Sponsor>Landscape Stewardship Committee</Sponsor>
<ThumbnailUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/xxlarge.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="xlarge">https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/xlarge.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="large">https://assets2-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/large.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="medium">https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/medium.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="small">https://assets2-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/small.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="xsmall">https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/xsmall.jpg?1389884001</ThumbnailUrl>
<ThumbnailUrl size="xxsmall">https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/040/299/901db33c84e81b1a30e59949bbcb112b/xxsmall.jpg?1389884001</ThumbnailUrl>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>false</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 09:54:42 -0500</PostedAt>
</NewsItem>

<NewsItem contentIssues="false" id="39803" important="false" status="posted" url="https://my3.my.umbc.edu/posts/39803">
<Title>Meddling with Metal</Title>
<Tagline>Most of the World's Metals are Now Undocumented</Tagline>
<Body>
<![CDATA[
    <div class="html-content">
    <p><em>Ever hear of shadow warehouses? Profit taking, monopolies, corruption, and the ability to disrupt international trade on an whim? Yeah, it should give the conspiracy theories plenty of ammunition. Do we really want to do that? For the sake of intellectual discussion? Yes, yes we do.</em></p>
    <h4>Millions of Tons of Metals Stashed in Shadow Warehouses</h4>
    <p>By Tatyana Shumsky
    Dec. 26, 2013</p>
    <p>BLOOMBERG NEWS- The world's metal is slipping into the shadows.
    </p>
    <p>Banks, hedge funds, commodity merchants and others are stashing tens of millions of tons of aluminum, copper, nickel and zinc in a hidden system of warehouses that span the globe.</p>
    <p>
    These facilities are known to some in the industry as "shadow warehouses" because they are unregulated and don't disclose their holdings.
    </p>
    <p>They operate outside the London Metal Exchange system of warehouses, the traditional home for these metals.</p>
    <p>
    As of October, a record seven million to 10 million tons of aluminum were being housed in these facilities, in countries as far apart as Malaysia and the Netherlands, according to estimates from several analysts.
    </p>
    <p>The amount dwarfs the 5.5 million tons of aluminum in the LME-licensed warehouses, based on LME figures as of Tuesday. Just 12 months ago, the figures were about equal.
    </p>
    <p>A similar shift is taking place with other industrial metals, analysts say <em>(NewzGuyz does not approve of using anonymous sources. What kind of analysts are these? Market analysts or business analysts? For all we know, they could be the guy on the corner who claims to be a psychoanalyst)</em>.
    As a result, producers and consumers are bracing for potentially wild swings in metals prices as market participants have difficulty accurately gauging supplies of these metals. With no clear insight into how much metal is in the shadow system, setting prices will become increasingly difficult, they say.
    </p>
    <p>Analysts and traders <em>(again... who are these anonymous analysts? can't you at least tell us who they work for? and now anonymous traders, too? That has to make the information more reliable! Actually, no. It doesn't)</em> say the flow of metal into shadow warehouses already is making prices move in unpredictable ways—such as when a large amount of unaccounted-for metal suddenly makes its way onto the market.
    </p>
    <p>"It's a real concern for anyone in the industry that metal can be sucked away into a nonreporting location with no expectation or date as to when it's going to be available again," said Nick Madden, senior vice president and chief supply-chain officer with Atlanta-based Novelis Inc., an aluminum-products maker that is among the world's biggest buyers of the metal <em>(Finally, a named source! thank you!)</em>.</p>
    <p>
    "The risk here is that the metal gets controlled by fewer and fewer hands, whose interests and business model is probably conflicting with that of end users," he said.
    </p>
    <p>Industrial metals end up in all sorts of everyday goods—from aluminum soda cans to copper wires inside refrigerators to zinc-plated steel in roofs. Turbulent raw-materials prices can make it more expensive to produce such goods when prices spike or limit output from mines and smelters when prices drop below their cost of production.
    </p>
    <p>The lack of transparency is making this shadow system increasingly attractive to institutions seeking to profit from information that other buyers and sellers don't have. Some companies also are seeking a cheaper alternative to the LME warehouses, which can be 10 times as expensive as the unregulated storage, analysts and traders say <em>(Gah! Just when we thought you were going to start naming sources! Are these the same "analysts and traders" from earlier, or new ones? NewzGuyz wants to know!)</em>.</p>
    <p>
    However, metal owners can face higher interest rates from banks if they wish to use metal stored in shadow warehouses as collateral for loans, because banks see the LME system as less risky, analysts say.</p>
    <p>
    Five companies operate 75% of the LME's 778 licensed warehouses. All own shadow facilities as well, people familiar with the companies said.
    </p>
    <p>In some instances, a single firm runs licensed and unlicensed warehouses in the same building, with the metal counted by the LME separated from hidden stockpiles by a chain-link fence, said David Wilson, a commodities analyst with Citigroup.</p>
    <p>
    Until 2010, most warehouses were owned by logistics firms like Netherlands-based C. Steinweg Group. But as metal-financing trades became more popular, C. Steinweg was joined by units of Goldman Sachs Group Inc. and J.P. Morgan Chase &amp; Co. as well as commodity traders Glencore Xstrata PLC of the U.K. and Switzerland and Trafigura Beheer BV of the Netherlands.
    </p>
    <p>All five companies declined to comment.
    </p>
    <p>Metal consumers like Novelis say that prices could increase sharply if warehouse owners buy up large amounts of metal, creating a shortage.
    </p>
    <p>Alcoa Inc., the largest U.S. aluminum maker, has the opposite worry. The company fears aluminum prices are vulnerable to a shock if a large amount of metal suddenly gets moved from shadow warehouses back to the LME's facilities, said Tim Reyes, president of materials management at Alcoa.</p>
    <p>
    "If one day, 2 million tons of aluminum show up and it just went from one pocket to another pocket, it has an impact on price that it shouldn't, and that's a concern for us," Mr. Reyes said.</p>
    <p>
    Such volatility makes it harder to make production plans, he said.</p>
    <p><em>(The article could've ended here and gotten a C. Because of the next four paragraphs it recieved a D, making it the first NewzGuyz featured article to receive such a low grade. Thanks for making your bias visible once more, Wall Street Journal.)</em></p>
    <p>Many metal buyers and producers say they are worried that new rules approved by the LME in November will speed up the flow of metal into shadow warehouses.
    </p>
    <p>Starting April 1, LME warehouses with wait times exceeding 50 days must deliver out more metal than they take in. The delays help boost income from rent and increase the fees paid for faster service, so warehouse owners are expected to increase LME rent charges to offset any reduction in profits.
    </p>
    <p>The rules strike at a trade that has grown sharply since 2010, where investors buy the cheap physical metal and sell a futures contract on the LME at a higher price. 
    </p>
    <p>Meantime, the metal sits in an LME-licensed warehouse until the futures contract expires. Higher warehouse costs make this trade less profitable.
    </p>
    <p>If applied today, the rules would flush aluminum out of LME-licensed warehouses holding 3.5 million tons of the metal, equal to 7% of annual global demand. 
    Warehouses holding copper and zinc also would be required to speed up the release of their stockpiles.
    </p>
    <p>In a Nov. 7 report, the exchange said one potential negative side effect of the new regulations is that more metal could end up in shadow warehouses.
    </p>
    <p>The LME in a statement said it has a duty to run a fair and orderly market and that the warehouse bottlenecks posed a range of issues in terms of price discovery.</p>
    <p>
    The rule changes were made following a consultation process that included an examination of all concerns raised about the possible unintended consequences of any changes, it said.</p>
    <p>
    "We believe that the package of measures contained in the proposal is, on balance, the best solution for all market users," the exchange said. 
    </p>
    <em><p>BIAS DETECTOR: </p>
    <p>Overall, NewzGuyz gives this article a D. NewzGuyz typically doesn't mess with conspiracy articles, but this one looked like fun... at first. The breaking after every line, the serious tone, a multitude of unamed sources- these are the makings of a conspiracy article. Conspiracies can be fun, leading us to think outside the box and question our reality. However, when they take a distinctly political tone, we get irritated.</p>
    <p>The last four paragraphs of the article link the conspiracy that the article has spent so long laying out to regulation and greed on the part of the regulators at the LME. It wasn't even necessary- the article would have been fine had it just stopped where we said it should have.  It crossed the line.</p>
    <p>However, this article is still of value. Assuming its true-- and we will give the Wall Street Journal the benefit of a doubt here-- It reveals just how few power brokers control pricing for virtually every metal we use. It's an eye-opener, but don't open your eyes too wide are you may be blinded by the bias. Here, NewzGuyz has a pair of sunglasses for you.</p></em>
    </div>
]]>
</Body>
<Summary>Ever hear of shadow warehouses? Profit taking, monopolies, corruption, and the ability to disrupt international trade on an whim? Yeah, it should give the conspiracy theories plenty of ammunition....</Summary>
<Website>http://online.wsj.com/news/articles/SB10001424052702304244904579276830893405644</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/39803/guest@my.umbc.edu/8703dd2030d372316bad05e6d3096fb0/api/pixel</TrackingUrl>
<Tag>alcoa</Tag>
<Tag>aluminum</Tag>
<Tag>bias</Tag>
<Tag>copper</Tag>
<Tag>jp-morgan</Tag>
<Tag>london-materials-exchange</Tag>
<Tag>metals</Tag>
<Tag>novelis</Tag>
<Tag>regulation</Tag>
<Tag>shadow-warehouses</Tag>
<Tag>zinc</Tag>
<Group token="retired-786">Newz Guyz</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/retired-786</GroupUrl>
<AvatarUrl>https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/xsmall.png?1386076236</AvatarUrl>
<AvatarUrl size="original">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/original.jpg?1386076236</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/xxlarge.png?1386076236</AvatarUrl>
<AvatarUrl size="xlarge">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/xlarge.png?1386076236</AvatarUrl>
<AvatarUrl size="large">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/large.png?1386076236</AvatarUrl>
<AvatarUrl size="medium">https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/medium.png?1386076236</AvatarUrl>
<AvatarUrl size="small">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/small.png?1386076236</AvatarUrl>
<AvatarUrl size="xsmall">https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/xsmall.png?1386076236</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/786/956f9d4b926a8af07bf32de21edd8eee/xxsmall.png?1386076236</AvatarUrl>
<Sponsor>Newz Guyz</Sponsor>
<PawCount>0</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 08:17:43 -0500</PostedAt>
<EditAt>Thu, 16 Jan 2014 08:48:19 -0500</EditAt>
</NewsItem>

<NewsItem contentIssues="true" id="40294" important="false" status="posted" url="https://my3.my.umbc.edu/posts/40294">
<Title>Summer Research Opportunity in the Life Sciences!</Title>
<Tagline>University of Minnesota; DEADLINE, February 15th</Tagline>
<Body>
<![CDATA[
    <div class="html-content">
    <p>Since 1989, the University of Minnesota LSSURP has overseen and coordinated several life sciences programs. The programs begin with a joint orientation weekend, followed by participation in a 10-week research project under the direction of a University of Minnesota faculty mentor and numerous special activities focused on professional development as well as social interaction. The summer research experience concludes with a poster symposium and banquet in August.</p>
    <p>LSSURP has given students that have been underrepresented in the life sciences the experience and training that enhances their ability to pursue a career in research. This represents a long-standing commitment to increasing the impact and quality of life science research at the University of Minnesota, which is strengthened when there is diversity in our faculty and students. We strongly encourage students whose backgrounds encompass diversity in culture, disability, ethnicity, gender, and economic background to apply for our summer research positions.</p>
    <h3>Program Dates:  May 29 - August 9, 2014*</h3>
    <h3> </h3>
    <h3>* <a href="http://www.cbs.umn.edu/lssurp/application" rel="nofollow external" class="bo">The application for Summer 2014 is available now.</a>
    </h3>
    </div>
]]>
</Body>
<Summary>Since 1989, the University of Minnesota LSSURP has overseen and coordinated several life sciences programs. The programs begin with a joint orientation weekend, followed by participation in a...</Summary>
<Website>http://www.cbs.umn.edu/explore/education-outreach/lssurp</Website>
<TrackingUrl>https://my3.my.umbc.edu/api/v0/pixel/news/40294/guest@my.umbc.edu/76c56c51ccbc3231a208826b6e6e9eeb/api/pixel</TrackingUrl>
<Tag>research</Tag>
<Tag>summer</Tag>
<Group token="undergradresearch">Undergraduate Research</Group>
<GroupUrl>https://my3.my.umbc.edu/groups/undergradresearch</GroupUrl>
<AvatarUrl>https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/xsmall.png?1600355057</AvatarUrl>
<AvatarUrl size="original">https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/original.jpg?1600355057</AvatarUrl>
<AvatarUrl size="xxlarge">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/xxlarge.png?1600355057</AvatarUrl>
<AvatarUrl size="xlarge">https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/xlarge.png?1600355057</AvatarUrl>
<AvatarUrl size="large">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/large.png?1600355057</AvatarUrl>
<AvatarUrl size="medium">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/medium.png?1600355057</AvatarUrl>
<AvatarUrl size="small">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/small.png?1600355057</AvatarUrl>
<AvatarUrl size="xsmall">https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/xsmall.png?1600355057</AvatarUrl>
<AvatarUrl size="xxsmall">https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/006/875606ced2b629148af4caa1a4e8dd3c/xxsmall.png?1600355057</AvatarUrl>
<Sponsor>Undergraduate Research</Sponsor>
<ThumbnailUrl size="xxlarge">https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/xxlarge.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="xlarge">https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/xlarge.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="large">https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/large.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="medium">https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/medium.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="small">https://assets2-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/small.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="xsmall">https://assets2-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/xsmall.jpg?1389877423</ThumbnailUrl>
<ThumbnailUrl size="xxsmall">https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/040/294/02280017830c64391d6e0f1331d47cb2/xxsmall.jpg?1389877423</ThumbnailUrl>
<PawCount>9</PawCount>
<CommentCount>0</CommentCount>
<CommentsAllowed>true</CommentsAllowed>
<PostedAt>Thu, 16 Jan 2014 08:04:11 -0500</PostedAt>
</NewsItem>

</News>
