About design and nearby

Javascript and CSS-powered Spinner: spin.js with Overlay

Posted: July 12th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

The days of using images to provide the visual effects are over. Now we can create gradients, shadows, rounded corners, use animations with styles only. And spinner image is not the exception.

So if I need spinner for my project, I use spin.js by Felix Gnass usually.
javascript-powered spinner It’s highly configurable, resolution independent, uses VML as fallback in old IEs,
uses @keyframe animations, falling back to setTimeout().

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

The only thing I missed with this library was an overlay option – to cover the rest of the page and prevent a user from clicking any element while the required content is loading.

I decided to add a ‘div’ which appears while spinner is working and removed after content has been loaded:

  1. <div id="overlay"></div>
  2. <div id="waitSpinner"></div>

Read the rest of this entry »

Hoya HD CIR-PL Filter: how I fixed it

Posted: April 29th, 2016 | Author: | Filed under: Tips and Tricks | Tags: , , , , | No Comments »

Photography is my passion. To take great landscape photos, I use polarizing filter (Hoya HD CIR-PL).

Hoya CIR-PL filterIt was the middle of a photoshoot and I was going to rotate my polarizer – and suddenly the front piece fell off but the rear threads were still on my camera. I was surprised a lot!

The fact was I hadn’t saw how it could be (possibly) broken..

After Google search, there really wasn’t much on there. I found that another person it happened to contacted Hoya via e-mail to their site and received this reply:

“The ‘black oily ring’ will need to go around the front ring. Then, squeeze the oily ring into the outside of the front ring while placing the front ring into the rear ring. It should snap into place.
If this doesn’t work, send the filter to THK Photo Products, 7642 Woodwind Drive, Huntington Beach CA 92647, ATTN: Repair Dept. Include a note explaining the problem, along with any and all contact information. .. The repair cost to re-assemble a filter is generally less than the cost of a new filter.”

Read the rest of this entry »

SVG for Web: Hover Over Effect

Posted: April 28th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

SVG (Scalable Vector Graphics) is an image format for vector graphics.

Sweet Web Design vector icon

I love to use SVG in web and mobile projects and applications because:

  • *.svg files have small file sizes and compress well.
  • *.svg files scale to any size without losing clarity.
  • *.svg files look great on retina displays.
  • You can manipulate the SVG file with CSS

You can create such vectors with Adobe Illustrator.

After you save your image as *.svg, open the inline svg with any editor:
Read the rest of this entry »

How to create Android VectorDrawables from Illustrator and use in your app

Posted: April 15th, 2016 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , | No Comments »

Vector graphics native support is a dream :) for developers who have to export resources as a rasterized *.png file for each different device resolution which scale without losing definition. The Android SDK now has native support for basic vector graphics – since the release of API 21 (Android 5.0) we have VectorDrawable:

  1. android.graphics.drawable.VectorDrawable

A VectorDrawable is specified through XML with the format of the path data. And we can to reformat the vector images in some SVG files to convert them into a VectorDrawable XML file (the details of the shape are defined inside a XML element).

After you create your vector picture (I use Adobe Illustrator), save it as *.svg file:

How to create Vector Drawables

To convert the file into *.xml, I use online converter tool (there is a similar option in my favorite Android Studio.)

Place the final XML file into the ‘res/drawable’ directory of your app and reference to it in XML or Java code as to ordinary drawables:

How to addVectorDrawables in AndroidStudio
Read the rest of this entry »

Using location.search to locate a parameter’s value

Posted: February 9th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Once I worked on jQuery isotope and the task was to link to a specific category, so that users can come from other pages to the filtered category. So if I had a page with services list (services.html) and wanted to filter the services by design it would look like (services.html/?mode=design) and show the design proposition only.

I decided to use the value parameter:
1. ‘location.search’ property returns the querystring part of a URL; for http://www.swd.com/services.htm/?mode=design

  1. var x = location.search;

the result of ‘x’ is

  1. ?mode=design

Read the rest of this entry »

Ready to contact a Freelance UI & UX designer for your project? I’m ready to jump onboard!

Let's discuss your project now