Monthly Archives: November 2017

Rylo's 360-degree camera is a tiny package with a lot of promise and cool tricks

One of the big new trends in cameras is those that can take 360-degree videos or pictures.
But Rylo, a San Francisco startup that’s recently released its own such camera, thinks what’s more important than being

Source File:

VW brand lifts midterm profit outlook on higher-margin cars, cost cuts

WOLFSBURG, Germany (Reuters) – Volkswagen’s core autos division has raised its midterm outlook for profitability on cost cuts and a planned rollout of higher-margin models, and expects deliveries to hit a new record this year.

Source Article:

Free CSS Grid Tools & Resources For Developers

The grid is a staple of every webpage. Whether you realize it or not, your layout runs on a grid.

Most designers and developers opt towards frontend frameworks that come packaged with a grid system. This is wildly helpful because it saves time manually coding your own.

The downside is adding more files to your page and increasing HTTP requests. That’s why building your own grid sometimes makes sense – but not by hand.

These tools should prove wildly helpful for anyone serious about grid design. They’re all free and they all work right in your browser so all you need is some Internet and a bit of patience.

YUI Grid Builder

yui grid builder

YUI is a user interface kit that features a great design style with reusable assets. Their team also released a handy YUI Grid Builder completely separate from the YUI framework.

As of this writing it seems the YUI library has been discontinued, yet the grid builder lives on. It’s hosted for free on GitHub so you can bet this likely won’t ever be taken down.

All you do is enter your max layout content width, total columns, and type of layout design(usually fluid). This also means you’ll want to design for responsivity using proper CSS breakpoints to handle smaller devices.

Overall a great tool that even offers a cool preview to help visualize your grid in action.

Responsive Grid Calculator

responsive calculator

This Responsive Grid Calculator is yet another webapp for generating your grid’s design.

I find this one a bit more complex to learn, but the interface is also somewhat “cleaner” in how you copy/paste your codes.

Just select the total number of columns and your margin percentage size. The calculator outputs all your raw HTML/CSS code using percentages so you can forever use this as a fluid grid layout. Pretty cool right?


responsify webapp

For the true visual designers out there you’ll adore Responsify.

It’s again entirely free to use and works right in your browser. However this tool is perfect for generating a grid without just looking at numbers and percents.

As you update the columns and gutters you can see the changes in real time on the page.

Don’t like your new changes? Roll it back until you find exactly what you’re looking for.

CSS Grid Template Builder

css grid template builder

CodePen is full of glamorous snippets and neat little webapps that are truly superb. Most of that stuff you won’t find anywhere else online.

This cool template builder created by Anthony Dugois is a beautiful example of creativity in action. The whole thing runs in JavaScript but it’s not really meant for geeking out to JS code.

This is a fully-functioning grid generator with auto-updating visuals on the page.

If you’re gonna use this webapp be sure to save the fullview version. This gives you more room to work and arrange a grid to suit your needs.

gridcalculator webapp

Easy of use and simplified inputs best describe the webapp.

This tool works much like other calculators where you enter the data for your grid and get a live preview of the final result. But this calculator has one thing that others don’t: exportable grids.

You can save your grid as a PNG file, or export the design for Photoshop & Illustrator. This tool is best used by designers who want to create mockups using grids, but don’t want to recreate new grids every time.


gridlover webapp

Cloud-based IDEs are quickly becoming the new norm for frontend coding. They’re handy for testing ideas and quickly bootstrapping new layouts from any computer.

Gridlover is one such example of a webapp that lets you write code directly from your browser.

But this one focuses primarily on grid design for typography and page layouts. By default it auto-fills text into the HTML and gives you a template for the CSS.

You can edit this to suit your needs and to support pretty much anything. The visual gridlines also make it super easy to plan your typography for maximum readability.

Grid by Example

grid by example webapp

Whether you’re an experienced developer or a novice just getting started, Grid by Example is a super handy resource to save.

It’s kind of like an online library of grid styles that you can study, clone, and repurpose for whatever you need. The whole thing feels incredibly simple to browse through, and the live previews are fantastic.

All of the demos are hosted on CodePen, so you have full access to the raw HTML/CSS code.

Take a look at their design patterns for grid ideas to use in future web projects.

Zurb CSS Grid Builder

zurb css grid builder

Zurb’s playground offers quite a few nifty tools from animation editors to custom newsletter templates. One of my favorite tools is the grid builder with automated code output.

You get to see a live preview of the grid right from your browser along with highlighted columns for a stronger effect.

It’s the ultimate tool for rapidly prototyping grids from scratch. And these grids can even tie into the Foundation framework if you’re planning to build a site with Zurb’s frontend library.


gridley webapp

Super simple and pretty straightforward, Gridley couldn’t be any more minimalist if it tried.

With just a single page and a few input fields you can quickly generate grid codes for your layout. The final output CSS appears on a new page which I find a tad annoying. But the final code is clean which is always a plus.

There’s even a help page for getting started with this framework and learning the ropes from scratch.

CSS Grid Demo – New Terminology

css grid demo layout

Lastly I want to wrap with a beautiful grid demo hosted on CodePen. This shows just how much you can do with a pure CSS grid and some knowledge of frontend languages.

This isn’t a web app or something that can generate custom grids. But it does work as a resource for studying CSS grids and learning to apply these techniques into your work.

Check out the full view to see the whole page and feel free to fork this pen to play with your own custom grid ideas.

Source File:

Uber has estimated 2.7 million people in the UK were affected by its massive data breach

Uber has revealed that around 2.7 million people in the UK were affected by a 2016 data breach that it kept secret.
Hackers stole names, email addresses, and phone numbers of Uber’s riders and drivers in

Source File:

Apple accuses Qualcomm of patent infringement in countersuit

(Reuters) – Apple Inc on Wednesday filed a countersuit against Qualcomm Inc, alleging that Qualcomm’s Snapdragon mobile phone chips that power a wide variety of Android-based devices infringe on Apple’s patents, the latest development in a long-running dispute.

Source Article:

Hi-Res Christmas Mockup Scene Generator – only $14!

It’s the season to start generating mockups! Now you can easily show off your logo, branding or designs in a variety of Xmas Mockup Scenes.

With this scene generator, you can easily slot in your designs to realistic mockups, along with a variety of Christmas-themed elements.

Buy the Xmas Mockup Scene Generator for Only $14!


  • Create beautiful hi-res scenes – 5200 X 3600 px.
  • Simple to paste in your designs using Smart Objects.
  • Loaded with Christmas elements – tinsel, stockings, lights, trees, bells, and more.
  • Build stylish customized scenes using high-quality assets and mockups.
  • Customize with color masks for every material.


Normally, this tool sells for $24 but for a limited time only, you can get this amazing Xmas Mockup Scene Generator for just $14! That’s a 42% savings off the regular price.

Click the BUY NOW button to start generating mockups today!

Buy Now for Only $39!

This article has been sponsored by Syndicate Ads.

Source File:

Bill Gates sent his 3 kids to the same $33,000-a-year private school in Seattle where he met his Microsoft cofounder at age 13

Bill Gates is an alum of Lakeside School, a private school in the Seattle, Washington, area where he met Microsoft cofounder Paul Allen.
Two of Gates’ kids have graduated from Lakeside School and his youngest child

Source File:

Arby's restaurant owner to buy Buffalo Wild Wings for $2.4 billion

(Reuters) – Arby’s restaurant owner Roark Capital Group will buy Buffalo Wild Wings Inc for $2.4 billion, months after an activist investor won seats on the chicken wing restaurant’s board following a proxy fight demanding management change.

Source Article:

Designing a Great Icon For Your Mobile App

Every day thousands of people browse the App Store and Play Store in search of utilities and entertainment. Behind every search and download is desire – a desire to solve a problem.

Products icons play a critical role in the process of search&download – in a world of short attention spans and many, many options, designers need to capture a users attention with just a few pixels on a tiny square canvas.

Every product needs a beautiful and memorable sign that attracts attention in the market and stands out on the home screen. Below you can see a few examples created by Fireart Studio.

But what exactly do you do if you need to design an icon for a mobile app that your users will notice and remember? Let’s take a look at some of the best principles of mobile app icon design.


Clarity is an essential characteristic of a great interface. A pictogram is the first opportunity to communicate, at a glance, a product’s purpose. When they are unclear, there’s a high risk of confusion – when people are unable to correctly identify what a pictogram is supposed to represent, it just won’t work for them.


  • Symbolism is key. People often associate pictograms with specific objects or actions based on previous experience. For example, in the Western world, the symbol of an envelope is commonly used to represent mail – both in digital and in physical spaces. It’s possible to use such associations to create potent visual signifiers for users.
  • Check competitors. If you have a hard time finding ideas on how to design a mobile application icon, take inspiration from products in your niche. Your competitors have probably already found the most obvious way to represent the primary function of a product.
  • Deconstruct user’s preferences. When designing any visual element, it’s important to consider what your target audience like or don’t like it. If you can conduct user testing, you can ask users directly by showing them different options. Try out several variations of your design to find the one users like the most.


We should design a mobile app icon to make it crystal clear on every screen resolution.


  • Avoid fancy graphics effects. Don’t include photographic details, 3D perspectives and drop shadows because they are hard to discern at a small screen.
  • Don’t use a lot of details. While on larger displays you have enough real estate to show large graphics and impressive visual effects, on a small screen such elements can become blurry.
  • Avoid using words. There’s no need to include promo words like “Free” or a product’s name. Use words only when they’re essential or part of a logo.

This icon isn’t legible – how it looks on home screen and Notification Center.

  • Check against a variety of backgrounds. While you can’t predict what wallpaper users will choose for their home screen, you still should check that your design works for edge cases – check your icon against a pure black, utterly white and colored backgrounds.
  • Test on real devices. What looks good on a desktop screen might not be so good on mobile, so testing on a real device is essential.


Memorability is about making something that stands out. If it stands out, it has a better chance of being noticed by users.


  • Complexity is the enemy of memorability. The more details you add, the less recognizable the object you design will be. Try removing elements until the concept starts to deteriorate.
  • Test your icon on the screen. Do a quick test to figure out if the image stands out on the screen – just place it on a grid of pictograms, and you’ll see whether or not it stands out.

The 1Password icon has great recognizability.


Think of your pictogram design as an extension of what your product is all about. It’s possible to create a connection between this small graphics object and entire experience – both logical connection (convey the meaning) and visual relationship (colors, textures, idea).

Tip: One way to ensure consistency is to use a styleguide (for example, to keep the color palette of your interface and icon in line).

Clear has a similar color scheme for both icon and interface.

Platform Recommendations

Just like any other GUI part, pictograms require following platform conventions. Consider iOS Human Interface Guidelines if you want to create a graphical symbol for iOS and Material Design guidelines for Android products.


Without any doubt, it’s possible to tell a great story in a wonderfully restricted canvas. Take the time to design beautiful and engaging graphics that perfectly represents your product’s purpose.

Source File:

YouTube fixed an autocomplete bug that suggested 'how to have s*x with your kids' (GOOG)

YouTube has fixed an autocomplete bug on its site that suggested “how to have s*x with your kids” as a top search result.
The company is investigating the autocomplete result, which is normally based on the

Source File: