Conductr wants to help developers make apps that will spread out across multiple devices, taking advantage of all your display real estate.
A typical evening at my house includes at least four screens of various sizes scattered around the living room: a TV, a laptop, an iPad, and an iPhone, plus the occasional smart watch or any other gadget I might be testing. For the most part, each operates on its own, though they share a lot of the same apps and services.
]]>
To: UMBC Community
From: Philip Rous, Provost and Senior Vice President for Academic Affairs
Dr. Mozie-Ross ’88 with UMBC students.
I am delighted to announce that Dr. Yvette Mozie-Ross ’88, health science and policy, has been promoted to the position of Vice Provost for Enrollment Management and Planning. Dr. Mozie-Ross served as Associate Provost for Enrollment Management since 2011 and prior to that appointment served for five years as Assistant Provost for Enrollment Management. Dr. Mozie-Ross also served as Acting Director of Academic Services and Director of Undergraduate Admissions and Orientation. Dr. Mozie-Ross is a UMBC alumna and earned a Ph.D. in Education Policy and Administration from the University of Maryland, College Park.
This appointment recognizes the centrality of strategic enrollment management, development and planning as it impacts the mission and future of our community and the success and progression of our students. It recognizes the importance of developing a leadership structure consistent with the increasing breadth of the enrollment management portfolio and the critical importance of strong and effective leadership of the enrollment management team in supporting core academic affairs functions and initiatives, including student success, retention and graduation; student administration and oversight; and direction of the SA system and the SA functional team. As Vice Provost, Dr. Mozie-Ross will work with the Provost and with UMBC’s leadership team on strategic enrollment planning and to leverage existing tools and resources to enhance data- and evidence-driven approaches to determine and reach our institutional enrollment and student success goals.
I am grateful to Dr. Mozie-Ross for her leadership, dedication and commitment in service to the UMBC community for the past 25 years. Please join us in congratulating Dr. Mozie-Ross on her appointment as Vice Provost for Enrollment Management and Planning.
__________________________________________________________
It’s only a matter of time before more cyberweapons emerge, says the founder of the Moscow-based computer security firm Kaspersky.
The Moscow-based computer security firm Kaspersky Lab has analyzed major new kinds of malware, including Stuxnet, which four years ago was revealed to have damaged centrifuges in Iran’s uranium-enrichment facilities. That discovery of this malware, believed to have been created by American and Israeli agents, led to fears that such attacks would escalate, perhaps eventually leading to actual cyberwar (see “New Malware Brings Cyberwar One Step Closer,” “Old-Fashioned Control Systems Make U.S. Power Plants a Hacking Target,” and “Preparing for Cyberwar, Without a Map”).
]]>It’s only a matter of time before more cyberweapons emerge, says the founder of the Moscow-based computer security firm Kaspersky.
The Moscow-based computer security firm Kaspersky Lab has analyzed major new kinds of malware, including Stuxnet, which four years ago was revealed to have damaged centrifuges in Iran’s uranium-enrichment facilities. That discovery of this malware, believed to have been created by American and Israeli agents, led to fears that such attacks would escalate, perhaps eventually leading to actual cyberwar (see “New Malware Brings Cyberwar One Step Closer,” “Old-Fashioned Control Systems Make U.S. Power Plants a Hacking Target,” and “Preparing for Cyberwar, Without a Map”).
]]>The XML Query Working Group published XQuery 3.0: An XML Query Language, along with XQueryX, an XML representation for XQuery, both as W3C Recommendations, as well as the XQuery 3.0 Use Cases and Requirements as final Working Group Notes. XQuery extends the XPath language to provide efficient search and manipulation of information represented as trees from a variety of sources.
The XML Query Working Group and XSLT Working Group also jointly published W3C Recommendations of XML Path Language (XPath) 3.0, a widely-used language for searching and pointing into tree-based structures, together with XQuery and XPath Data Model 3.0 which defines those structures, XPath and XQuery Functions and Operators 3.0 which provides facilities for use in XPath, XQuery, XSLT and a number of other languages, and finally the XSLT and XQuery Serialization 3.0 specification giving a way to turn values and XDM instances into text, HTML or XML.
Read about the XML Activity.
]]>In order to achieve smooth transitions and animations, a browser needs to avoid doing extra work on its main thread, the part that’s in charge of handling tasks like JavaScript, style calculations, layout, painting and compositing (more on these later). Fortunately, modern browsers are able to offload certain tasks from the main thread by delegating them to the GPU to handle compositing.
This optimized compositing process is where all the individual textures of a website are uploaded to the GPU then drawn out to create the final picture we see on our screen; it all happens behind the scenes before a single frame of content is presented.
In this article, we’re going to focus on the rendering performance of animations and transitions, as they can be one of the biggest offenders in performance bottlenecks.
When we animate an element, the browser has to re-evaluate the page — frame by frame — to determine if and how the element has affected the flow of nearby elements and the overall page, then recalculate the positions and geometries of those elements. This process is called reflow.
Free trial on Treehouse: Are you interested in learning more about animations and transitions? Click here to try a free 14-day trial on Treehouse.
The browser also looks for areas that need to be re-repainted due to changes in an element’s color or background properties. Every time a repaint or reflow happens, the browser has to composite those areas all over again. These reflows and repaints can be “expensive,” making our animations and transitions appear janky.
The key to great animation performance is keeping the number of areas being reflowed and repainted as low as possible. But how do we know if the browser is doing more repainting and reflowing than it needs to?
It’s always important to test the performance of an animation or transition in order to see exactly how much work the browser is doing. Using the Timeline panel and rendering settings of Chrome DevTools, we’ll test four transition/animation methods to determine which one will always give us the smoothest results.
The goal is to keep the browser’s paint times as low as possible and frame rates at or near 60 frames per second (FPS).
Note: To learn more about Chrome DevTools, watch our course on Website Optimization.
We’ll start with a test that transitions the top and left margins of the logo:
Results: The average paint time is somewhere around 19ms, but the frame rates are dropping down to nearly 30fps at times, which usually results in janky transitions. Animating or transitioning properties like margin and padding cause reflows since they’re animated on the browser’s main thread, so it’s best to avoid animating or transitioning margins.
Next, we’ll position the logo absolute, then animate its top and left position with a keyframe animation sequence.
Results: The paint times are higher, averaging 23ms, and the frame rates are still much lower than 60fps.
It’s also worth pointing out that absolutely-positioned elements will not cause reflows on other elements. They’re separated from the normal document flow, which minimizes the reflow calculations done by the browsers.
Let’s see what happens when we transition the logo using the translate3d CSS transform function.
Results: Once the transition starts, the paint times are at 0.0ms and the frame rates are steadily above 30fps — that’s exactly what we want! Notice the outline around the logo at 00:13. That indicates it’s being composited on a separate layer by the GPU, making paint times and frame rates faster.
When an element is animated or transitioned on a separate GPU layer, everything on that layer moves as one big block of pixels, so the browser doesn’t need to calculate every single pixel on every frame.
Other CSS properties that trigger that type of acceleration are translateZ() and opacity.
Many jQuery effects, like the .animate() method, are also commonly used to animate elements. Let’s see what happens when we run a similar animation using jQuery.
Results: The paint time average is ~20ms — on par with the “main thread” CSS transition and animation. But the frame rates are really low, dropping below 30fps at times — notice the spikes in FPS (big yellow bars) once the hover event is fired and the animation starts.
A disadvantage to using jQuery (or pure JavaScript) for animations is that the browser is not able to optimize them like it can with CSS. The animations run on the browser’s main thread, which increases the chances of skipping animation frames.
But we shouldn’t entirely write-off JavaScript for animations. The real power behind using JavaScript is that it gives us more control over animations. For example, we can start, pause, reverse or cancel an animation sequence.
With CSS, once we start an animation or transition, there’s no way to stop them. But because they have a definitive start and stop point, the browser can optimize them with more ease. So depending on your animation, it might be best to use a combination of both: JavaScript to trigger a CSS animation or transition.
Although we don’t have complete control over CSS animations and transitions, the main benefit to using them is that the browser can optimize them by compositing them on a separate layer. However, forcing too many compositing layers with translateZ() or translate3d() may also result in poor rendering performance.
For example, giving every child element in an animation transform: translateZ(0), when adding it to the parent element is all that’s necessary. Too many layers force longer composite times, which leads to choppy animations.
Animating or transitioning properties like margin, padding, border, position, font-size — even width and height will affect layout and cause reflows. And properties like visibility, border-style, border-radius and background will affect painting.
So it’s always best to animate or transition the two properties that affect compositing: transform and opacity. Doing so prevents the browser from having to do a repaint or reflow on every frame and, because the site’s textures are already on the GPU, the browser does less work to recomposite and draw pixels to the screen.
The post How to Create Smoother Animations and Transitions in the Browser appeared first on Treehouse Blog.
]]>