Thursday, April 25, 2013

Your Daily digest for Tech Geek`s Tools, Tips, Tricks and Tutorials

Tech Geek`s Tools, Tips, Tricks and Tutorials
Pipes Output
Elon Musk Hates 405 Freeway Traffic, Pays Money To Speed Construction
Apr 25th 2013, 23:49

S810 writes "Elon Musk, one of the main people behind PayPal, Space Exploration Technologies and Tesla Motors, has paid $50,000 to help Los Angeles speed up construction of the 405 Freeway, making it better and says that he will pay more if needed. From the article: 'Musk said he is open to pay the cost of adding workers to the widening project "as a contribution to the city and my own happiness. If it can actually make a difference, I would gladly contribute funds and ideas. I've super had it." — Musk quips that it's easier getting rockets into orbit than navigating his commute between home in Bel-Air and his Space Exploration Technologies factory in Hawthorne.' For those who aren't familiar with this issue, the 405 Freeway runs from the northern end of the San Fernando Valley all the way down to El Torro and runs by LAX. Residents are getting frustrated that this widening project is over budget and well over the anticipated time frame that it was supposed to completed by."

Share on Google+

Read more of this story at Slashdot.



Electronic Arts Slashes Workforce
Apr 25th 2013, 23:21

Dawn Kawamoto writes "Electronic Arts has been slashing jobs in recent weeks and according to Kotaku the size of the layoffs has reached as much as 10 percent of its workforce. The game maker says it's making the move to align its workforce closer to mobile and new technologies. For the console dinosaur that's trying to fight extinction by evolving into a bigger mobile player, this process has been a painful transition with a number of employees ending up in the tar pit - as well as its CEO."

Share on Google+

Read more of this story at Slashdot.



Ask Slashdot: Setting Up a System Integration Room At VAR?
Apr 25th 2013, 23:02

o2binbuzios writes "Due to an office move, I have a chance to do a clean-sheet design for an integration room at a fairly large VAR ($100M+ ). I'm looking for some ideas or best practice to support 100-120 square meters (~50 x 30 ft). I'm particularly interested in ideas around efficient workflow, ways to manage cabling and electrical, and 'environmental' solutions that make it a pleasant place to work. There will be a central bench with 6-8 stations (3-4 per side) with engineers and techs who may be configuring stacks of up to 10 devices at a time that could range from servers, to network elements, to SAN & NAS devices and more. I've been looking for a paper that seems like it must exist — but I'm happy to gather good ideas one at a time or in bunches here on Slashdot."

Share on Google+

Read more of this story at Slashdot.



Pearson Vue Now On Day 5 of Massive Outage
Apr 25th 2013, 22:25

Reader Patrick In Chicago is one of a few readers to write with this unpleasant news: "Computer-based testing provider Pearson Vue is now in day 5 of a global outage, preventing test-takers worldwide from sitting for exams. I was personally turned away from a Cisco exam on Wednesday morning because Pearson was unable to deliver. Countless people have posted to Pearson Vue's Facebook page detailing various states of panic. There are people who have certifications expiring. Others are unable to sit their medical board exams. Still others are unable to sit exams that they are required to pass in order to work — Pearson Vue's incompetence has actually prevented people from going out and making a paycheck." This reminds me of a friend of mine who had to wait half a year to re-take his bar exam, because of a software glitch on the part of ExamSoft's software.

Share on Google+

Read more of this story at Slashdot.



Book Review: The New Digital Age
Apr 25th 2013, 21:45

Nerval's Lobster writes "Eric Schmidt and Jared Cohen begin their new nonfiction book, The New Digital Age, with a rather bold pronouncement: 'The Internet is the largest experiment involving anarchy in history.' Subsequent chapters deal with how that experiment will alter life in decades to come, as more and more people around the world connect to the Internet via cheap mobile phones and other devices." Keep reading to see what Nerval's Lobster has to say about the book.

Share on Google+

Read more of this story at Slashdot.



WWDC Sells Out In 2 Minutes; Ticket On eBay 45 Minutes Later
Apr 25th 2013, 21:05

alphadogg writes "The Apple Worldwide Developers Conference sold out in just two minutes today, blowing away last year's record of two hours. Tickets went on sale today at 10 a.m. PDT, as was announced yesterday, when Apple said its event would be held June 10-14 at Moscone West in San Francisco. Apple WWDC runs neck-and-neck with the annual Google I/O event in the race for hottest tech show. The Google event, slated for May 15-17 at Moscone Center, sold out in 45 minutes this year. While transferring tickets for WWDC is generally not allowed, an ambitious eBay seller is attempting to get $10K for the $1,600 ticket."

Share on Google+

Read more of this story at Slashdot.



Washington AG Slams T-Mobile Over Deceptive 'No-Contract' Ads
Apr 25th 2013, 20:22

zacharye writes "Washington State Attorney General Bob Ferguson on Thursday ordered UNcarrier T-Mobile to correct 'deceptive advertising that promised consumers no annual contracts while carrying hidden charges for early termination of phone plans.' T-Mobile, which recently did away with standard cell phone service contracts and typical smartphone subsidies, is accused of misleading consumers by advertising no-contract wireless plans despite requiring that customers sign an agreement that makes them responsible for the full cost of their handsets should they cancel service prematurely ..."

Share on Google+

Read more of this story at Slashdot.



Washinton AG Slams T-Mobile Over Deceptive 'No-Contract' Ads
Apr 25th 2013, 20:22

zacharye writes "Washington State Attorney General Bob Ferguson on Thursday ordered UNcarrier T-Mobile to correct 'deceptive advertising that promised consumers no annual contracts while carrying hidden charges for early termination of phone plans.' T-Mobile, which recently did away with standard cell phone service contracts and typical smartphone subsidies, is accused of misleading consumers by advertising no-contract wireless plans despite requiring that customers sign an agreement that makes them responsible for the full cost of their handsets should they cancel service prematurely ..."

Share on Google+

Read more of this story at Slashdot.



Two Changes To Quirky Could Change The World
Apr 25th 2013, 19:40

"Quirky.com has generated a lot of buzz," writes frequent contributor Bennett Haselton, "but it's hard to see how it could ever be more than a novelty unless they change two key features of their process. Fortunately, they already have all the infrastructure in place for bringing inventions to fruition, so that with these two changes, Quirky really could deliver on their early promise to change the way products get invented." Read on for Bennett's thoughts — which seem more sensible than quirky.

Share on Google+

Read more of this story at Slashdot.



Scientists May Have Detected Neutrinos From Another Galaxy
Apr 25th 2013, 18:57

The Bad Astronomer writes "A experiment called IceCube — consisting of sensitive light detectors buried deep in the Antarctic ice — has detected two ultra-high-energy neutrinos, each with over a peta-electronVolt of energy (a quadrillion times the energy of a visible light photon), the highest energy neutrinos ever seen. The two events, nicknamed Bert and Ernie, have a 99% chance of originating outside our galaxy, likely created either by a supermassive black hole or an exploding gamma-ray burst."

Share on Google+

Read more of this story at Slashdot.



Recovering Data From Broken Hard Drives and SSDs (Video)
Apr 25th 2013, 18:16

Russell Chozick owns a small company in Austin. TX, called Flashback Data that recovers data from messed-up hard drives. And SSDs and Flash memory, too. How badly damaged does a drive have to be to defeat Russell and his crew? Apparently, smashed to bits. Not long aqo we did a video about a company that destroys data on hard drives, and we've had at least one Ask Slashdot where the question was, "What's the Best Way To Destroy Hard Drives?" In today's video, Russell is talking about the opposite of destruction -- except that he destroys data upon request, too. Obviously, checking the wrong box on a customer order form could cause big problems at Flashback Data, couldn't it? Let's hope they never do that -- and let's hope we all back up all of our data so we never need to use a data recovery service. You do back up all your data, don't you?

Share on Google+

Read more of this story at Slashdot.



Texas Company's Antique Computers Are For Production, Not Display
Apr 25th 2013, 17:32

concealment writes "Sparkler Filters up north in Conroe [Texas] still uses an IBM 402 in conjunction with a Model 129 key punch – with the punch cards and all – to do company accounting work and inventory. The company makes industrial filters for chemical plants and grease traps. Lutricia Wood is the head accountant at Sparkler and the data processing manager. She went to business school over 40 years ago in Houston, and started at Sparkler in 1973. Back then punch cards were still somewhat state of the art." See kottke.org for an eye-popping view of one of the "programs" — imagine debugging that.

Share on Google+

Read more of this story at Slashdot.



Microsoft Ad Campaign Puts a Hotspot Inside a Magazine
Apr 25th 2013, 16:51

An anonymous reader writes "Microsoft is putting in real Wi-Fi hardware hotspots inside some copies of the latest issue of Forbes magazine. The unique Office 365 promotion was revealed in a post on the Slickdeals.net message board. The WiFi router, when activated, offers 15 days of free WiFi service via T-Mobile's network on up to five devices at once." Which is more impressive: Wi-Fi hotspot in 2013, or E-ink display in 2008?

Share on Google+

Read more of this story at Slashdot.



Old Educational Computer Resurrected As a Spreadsheet
Apr 25th 2013, 16:29

An anonymous reader writes "Back in the '60s, Bell Labs created a 'paper computer' called CARDIAC so students could learn the fundamentals of computers. Dr. Dobb's recreates the paper computer in an Excel spreadsheet and hints they will show how it gets ported to an FPGA in future installments."

Share on Google+

Read more of this story at Slashdot.



MySQL Founders Reunite To Form SkySQL
Apr 25th 2013, 16:10

mikejuk writes "The founders of the original MySQL, the open-source database, are getting back together in a merger between Monty Program and SkySQL. SkySQL was created by around two dozen former MySQL executives and investors after Oracle bought MySQL from Sun. Widenius started Monty Program AB and created the MariaDB database from some of MySQL's open source code. The merger will provide a stronger rival to MySQL, so reassuring users who are worried about Oracle's future plans for the database."

Share on Google+

Read more of this story at Slashdot.



Harvard To Close New England Primate Research Center
Apr 25th 2013, 15:29

sciencehabit writes "Citing an increasingly bleak outlook for federal research funding, Harvard Medical School is shutting down its major primate center, which has recently experienced the departure of several key scientists and an investigation into its handling of animals. In the announcement, which surprised many primate researchers, the school said it will not seek to renew the New England Primate Research Center's (NEPRC's) 5-year grant from the National Institutes of Health (NIH) and will 'wind down operations' at the center in Southborough, Massachusetts, over the next 2 years. The center, which has a nearly 50-year history, had done groundbreaking work on an AIDS vaccine and developed animal models for diseases such as Parkinson's, among other accomplishments."

Share on Google+

Read more of this story at Slashdot.



Ubuntu Releases 13.04, Sticks To 6-Month Release Rhythm
Apr 25th 2013, 14:48

Barence writes "Ubuntu has shelved the idea of moving to rolling releases, and will continue to release a new version every six months. Earlier this year, Ubuntu developers discussed the idea of moving to rolling releases, with new features added to the OS as and when they were ready. However, In an interview with PC Pro, Canonical CEO Jane Silber said the developers had taken a 'cold, hard look at our long-standing practices' and decided to stay with twice-yearly releases. It has, however, cut support on non-LTS releases from 18 to nine months." Today, the Ubuntu team have released the latest iteration of Ubuntu, 13.04 ("Raring Ringtail"), along with variants like Kubuntu 13.04.

Share on Google+

Read more of this story at Slashdot.



DMCA Safe Harbor May Not Apply To Old Copyrighted Works
Apr 25th 2013, 14:07

tlhIngan writes "On Tuesday, the New York appellate court denied Grooveshark the DMCA safe harbor protection on songs like Johnny B. Goode. What happened was due to an oddity in the law, the DMCA does not apply to state-licensed copyrighted works (those copyrighted before February 15, 1972). What happened was Congress overhauled copyright law to make it a Federal matter, but all works prior to that date still come under common-law and state statutes. The end result is that Grooveshark does not have DMCA safe harbor protection for older works and may be sued for copyright infringement (barring other agreements, e.g., UMG and YouTube), even though they fully comply with the DMCA otherwise, taking down copyrighted materials. Grooveshark is a "music locker" service allowing users to upload music for others to listen to."

Share on Google+

Read more of this story at Slashdot.



Startup Founder Plays Tech Press Like a Fiddle
Apr 25th 2013, 13:25

theodp writes "Steinar Skipsnes came up with a unique way to get more women into tech. Make them up. Posing as 'Sarah Hanson,' a 19-year-old woman who claimed to have auctioned off 10% of her future income in return for $125,000 to fund her Senior Living Map startup, Skipsnes pitched the story via email to generate press coverage. It worked — VentureBeat, HuffPo, Yahoo!, AOL, GeekWire, and others took the bait. But after doubts were aired about the story, Skipsnes fessed up to concocting the too-good-to-be-true hoax about the female teen entrepreneur to appeal to the interests of the tech press. 'I started to think "what if I took the elements of what the press loves and created a story?"' Skipsnes explained. "So I did.'"

Share on Google+

Read more of this story at Slashdot.



Device Keeps Liver Alive Outside Body For 24 Hours
Apr 25th 2013, 13:06

kkleiner writes "A new device will keep a liver alive outside of the human body for up to 24 hours. Developed at Oxford, the OrganOx circulates oxygenated red bloods cells and nutrients through the liver while maintaining the proper temperature. Doctors estimate that this new technique could double the number of livers available, saving the lives of thousands who die every year awaiting transplant."

Share on Google+

Read more of this story at Slashdot.



Responsive Layouts: How To Maintain Hierarchy Through Content Choreography
Apr 25th 2013, 10:57


  

One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post "Content Choreography," which showed how visual hierarchy gets lost when columns are dropped below one another.

While techniques exist to help with part of the problem, the solution also requires conscious thought in how you structure blocks of content in your HTML. You need to think about how you'll want to rearrange blocks of content as your design moves from single to multiple columns.

What Is Content Choreography?

As a layout changes from a widescreen to a tablet to a smartphone, the number of columns is usually reduced from three or four down to one. The typical and easiest solution is to drop the columns one by one and stack them on top of each other.

Diagram showing how columns drop in a typical 3 column responsive design
The figure above shows three columns of content. The lines below the two right columns indicate that each will drop below the main content as the screen's width decreases.

Once you're down to a single column, the layout is constrained by the source order of the content blocks in the HTML. Whichever column comes first in the HTML is displayed at the top; whichever column is next in the HTML goes right below; and so on down the stack.

Unfortunately, this means that information that is highly visible at the top of the page when multiple columns are present ends up being far down the page as one column drops below another. If content is important enough to show at the top of the page when viewed on a widescreen browser, do we want to bury it on a smartphone screen?

All of the information in your sidebar column probably isn't as important as all of the information in your main content column, but some of the sidebar content is likely more important than some of the main content.

Two examples of single column responsive designs
The left side of the figure above shows a single column layout, where each column drops in its entirety below the previous one. The right side shows elements from each column mixing with other elements.

The left side of the image above shows the typical column drop. As the design is reduced to a single column, the content inside each container or column is dropped below all of the content in another container.

Ideally, the visual hierarchy would be maintained, and the content in different columns would intermix as the design moves from three columns to two to one. We'd also like more control over the display order of content, beyond the HTML source order. Both scenarios are illustrated on the right side of the image above.

This greater control over the blocks inside containers is what's considered content choreography. I assume Trent chose the word "choreography" as a metaphor for how we'd like to orchestrate the movement of blocks of content as our layout changes.

Our current development practices don't make this choreography easy. What they do make easy is dropping entire columns one below the other, which means that everything inside one column must always end up in its entirety above or below everything in another column.

Two Problems in One

What I've described above are really two separate problems:

  • Source order
    In a single-column layout, blocks of content will display in the same order as they're located in the HTML structure. Unfortunately, the best source order for one layout isn't necessarily the best source order for another.
  • Intermixing content
    Instead of having to drop entire columns of content below one another, we'd like to mix blocks of content from the different columns in the single-column layout.

The first issue has some technical solutions on the way, one of which is just about here. The second issue will require that we change our thinking in how we develop layouts.

Solving The Source-Order Problem

In time, there will be several solutions to the source-order issue, in the form of new CSS specifications. Depending on which browsers you need to support and what you're willing to do to support them, one of those specifications may already be here.

Three specifications that we'll likely find ourselves using in the future are:

The second and third of these specifications have almost no support in current browsers. Surprisingly, Internet Explorer is leading the way with both. IE 10 supports regions and grid layouts with the -ms vendor prefix. No other browser offers any support at the moment, so we'll have to wait on these specs a bit longer.

Flexbox, however, has pretty good support. The spec has undergone some changes, and two versions are currently supported by browsers. If you don't mind mixing the old and new syntaxes, you can get flexbox to work in the current versions of almost all browsers.

Opera mini and IE below version 10 don't support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I'll point you to some articles I've written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.

Suffice it to say that with a single CSS property, we can essentially tell our documents to display blocks of content in a different order than how the source code orders the blocks in the HTML. Jordan Moore has also written about flexbox and content choreography, and he's created a demo to illustrate.

What you should take away from this section is that solutions to the source-order problem are coming soon — one of them very soon. It won't be long before we can easily rearrange blocks inside a single container. However, rearranging blocks inside one container isn't the same as rearranging them across several containers.

Solving The Intermixing Content Problem

Unlike the source-order problem, the issue of intermixing content across columns doesn't have a technical solution. It's up to us, and, ultimately, it means we need to wrap content in fewer HTML containers.

We'll have to dig a little deeper into the problem to understand why this is so.

CSS Visual Formatting Models

CSS offers several visual formatting models, such as the normal document flow, floated elements and positioned elements. Flexbox is part of another, the flexible box layout model. In all of these models, elements are located relative to a containing element.

We can make it look as though elements are not bound by their containers, but they still are. For example, you could float an element that's inside one column and give it a negative margin so large that it appears to be located in another column, however, elements in that other column won't reorient themselves. To these elements, the floated element is still in the first column.

Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won't. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won't get out of the way. We need them to get out of the way, though, if we're going to intermix page elements.

With a little thought and CSS, you can usually figure out some way to rearrange elements inside one container however you like. With a little more thought, you can even make elements in one container appear to be located inside another, although you'll usually have to position the elements in that other container with more complex CSS and with what Harry Roberts refers to as "magic numbers."

If the term is new to you, magic numbers are those numbers we use to make something work in a single particular instance. They typically stop working as soon as some other value changes, and, given the nature of responsive design, other values are always changing. Magic numbers in CSS are best avoided.

We Need to Give Up Containers

For the last few years, whenever we've wanted to move a group of adjacent elements to a certain part of a layout, we'd wrap those elements in a container and write CSS to display the container somewhere in the design. I'm sure you've used CSS selectors like #wrapper and #container more than once.

We need fewer of these HTML containers and more CSS virtual container classes that we can apply to different elements as needed.

In other words, instead of this…

  <div id="container">    <div>Content here</div>    <div>Content here</div>    <div>Content here</div>  </div>  

… we need more of this:

  <div class="container">Content here</div>  <div class="container">Content here</div>  <div class="container">Content here</div>  

In the latter block, each division might have a different class name or perhaps different additional classes applied. This allows for greater flexibility in rearranging them in the layout. In the first block of code, the three content divisions will always reside inside their parent container.

I'm not suggesting that the first block of HTML above should never be used. There will absolutely be times when wrapping several divisions of content with a container makes sense. However, if you want some of those blocks to intermix with elements in other columns, then you'll have to think more in terms of the second block of HTML above.

With CSS, we have the ability to rearrange blocks inside a container. We don't have the ability to break content out of one container and move it inside another container. If you want more mixing of blocks, then you'll need fewer containers.

Examples

While there are currently far more instances of websites that are dropping columns wholesale, there are certainly websites that mix content in one column with content in another column.

Let me first offer a detailed look at my own website, since I'm most familiar with it. I'll follow this up with a few other websites that intermix content in slightly different ways.

A Personal Example

Around the time that Trent coined the term "content choreography," I was working on a redesign of my website and was trying to figure out how to mix content blocks as the layout changed.

The image below shows the top of a typical blog post on my website when the browser is wide enough to accommodate two columns. Click the image to see the live post.

Meta information such as my name and the publication date are in a column to the left, while the article's title, main text, images, headings and so on are in a column to the right.

Screenshot of post from Vanseo Design with two-column layout
My website when the browser is wide enough to accommodate two columns.

Seeing the layout, you might instinctively think each "column" is wrapped in its own container and that I've floated both columns left or right; it's how I would have developed this layout a few years ago. But doing that leads to the problem of one of the columns being forced to drop below the other on small screens.

Below is the same page as a single column on a narrower screen. The meta information from the left column sits below the article's title from the right column but above everything else in that right column. Both "columns" of content have actually been inside the same container all along.

Screenshot of post from Vanseo Design with single column layout
My website as a single column on a narrower screen.

The image below presents a more abstract view of what's going on. On the left, you see the layout as it appears when displayed as a single column. On the right is the two-column version of the layout.

Every element is its own unique block and serves as its own container. The page's main heading is its own contained block. All of the meta information is inside another container directly below it. After that, every paragraph, subheading and image is also its own self-contained block of content. The same goes for anything else that might end up in a post, such as a block quote or code block.

Abstract diagram showing content on Vanseo Design with single and 2 column layout
A more abstract view of what's going on.

On small screens, all of the blocks display in the source order. On wider screens, I shift this entire single "column" to the right by adding a left margin to each individual block. In the CSS, I have a long list of selectors with a single line of declarations. When I want something to appear in the "left column," I float it left and reset its margin to zero.

The solution is hardly perfect. Blocks pulled into the virtual left column won't slide up or down. They simply move to the left. This solution doesn't enable me to display something from the bottom of the article at the top of the left column. But, hopefully, this illustrates how rethinking containers can help us intermix content from different columns into a single column.

The Next Web

The Next Web mostly drops columns down as it rearranges from three columns to one, but it does intermix elements at the top of the page.

Screenshots of The Next Web

The image above shows the website displayed as two columns (on the left) and a single column (on the right). The blue outline shows the container around elements at the top of the page. You can see that the secondary stories to the right of the top story drop below it but remain above the other stories, due to the way the containers have been set up.

In the single column, the images in all of the first three stories are now physically the same size, so the hierarchy has changed. However, the second and third stories are still seen as "less important" because they come after the top story.

This intermixing is achieved by thinking in advance of which elements will shift columns and by placing elements that need to be rearranged in the same container, separate from other containers of content.

Time

Time magazine intermixes content across columns and containers. Notice how the "Latest Headlines" section (in the green container) moves from the right column at the top to just below the main image and story links in the single column.

Screenshots of Time Magazine website

While not shown in the image above, the row of four images on the left follows the "Latest Headlines" in the single column. The remaining content in the right column drops much further down. You can see this by viewing the website directly.

The website achieves this intermixing by ignoring most of what I've said in this post about using fewer containers. Instead, it uses JavaScript to rewrite the HTML, moving elements in and out of different containers as the layout changes. It is another solution to this issue, although better planning up front is preferable.

Enoch's Fish & Chips

The navigation on Enoch's Fish & Chips' website integrates with the logo and company blurb when the layout is a single column:

Screenshot of Enoch's Fish and Chips with single column

The navigation (and the tagline further down) moves to the right column when the browser is wide enough to accommodate multiple columns.

The website rearranges these elements similar to the way I rearrange elements on my own website; the logo, navigation, blurb and tagline are each a separate container. To move them around, the website uses positioning instead of floats, but otherwise, the principle is the same.

Screenshot of Enoch's Fish and Chips at 2 columns

Closing Thoughts

Many of us have, understandably, been taking the easy way out with responsive layouts. When the width of a screen cannot accommodate a column, we've been dropping the column in its entirety below other columns. In some cases, this is perfectly fine. In others, it breaks the carefully designed hierarchy.

We face two issues in maintaining the hierarchy. The first is having to follow the HTML source order when the layout is a single column. The solution to this problem is a technical one and is coming in the form of new CSS specs that will allow the display order and the HTML source order to be different.

The second problem is less technical and more a challenge to how we think about structuring our HTML, particularly to how we use containers. Elements can't move from one container to the next. We can fake it with complex CSS, or we can rewrite the HTML with JavaScript; but, ultimately, if we want to intermix elements, we're best of using fewer HTML containers to create columns. Instead, we should leave more of our content blocks in their own containers and use CSS to create virtual columns in the layout.

This solution doesn't confine our elements to structural containers and instead enables us to more easily rearrange the elements in different layouts.

(al)


© Steven Bradley for Smashing Magazine, 2013.

Create Semantic Modern Tooltips with jQuery Tooltipster
Apr 25th 2013, 07:10

Advertise here via BSA

Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.

The style of your Tooltipsters can be easily changed by modifying the default Tooltipster theme in the tooltipster.css file. You also have the option to create and attach a brand new theme. Tooltipster’s options gives you a wide range of variables to tweak your tooltip to your heart’s content as well.

tooltipster

Requirements: jQuery Framework
Demo: http://calebjacob.com/tooltipster/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

How to Make FullScreen Page Transitions with CSS
Apr 25th 2013, 07:01

Advertise here via BSA

Codrops has shared Fullscreen Layout with Page Transitions with us. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again.

Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back. All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

full-screen-transitions

Requirements: JavaScript Framework
Demo: http://tympanus.net/Development/FullscreenLayoutPageTransitions/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions