Skip directly to content

Feed-aggregator

Flyte Is A LightBulb That Levitates, And It’s Cool

hongkiat.com - zo, 26/04/2015 - 12:01

What is the first thing that comes to mind when you see this? Let me help: How is this light bulb floating on top of that base? Secondly, what in blazes is keeping this lightbulb lit up?

Magic.

Well, the magic of magnetic levitation and wireless power transmission, to be precise. That LED lightbulb is held afloat by an electromagnet, and it is lit up wirelessly – look ma, no battery or power cables.

This, is the Kickstarter project, Flyte: Levitating Light. Flyte is a shatterproof, energy-efficent LED lightbulb that shines at 60 lumens, and is designed to fit into a cafe, home or office setting.

The bulb is supposedly good for 50,000 hours (or 22 years at 6 hours a day) – basically, you probably don’t have to change this lightbulb. The 7.9 x 7.9 x 1.4 in base is available in sustainably sourced walnut, oak and ash. There is also a limited-edition, handcrafted diamond-shaped wooden base.

Once the bulb lights up and levitates, it rotates slowly above the center of the base, much like an art installation you would see at an art gallery. To turn the light on or off, just touch the base lightly with your finger.

The best part about this is that the base for Flyte has a second use as a wireless charging base, though you will need third party accessories. To start charging, just place the phone on the base, that’s it.

How To Get Flyte

Flyte: Levitating Light reached their goal of $80,000 within 2 days and at the time of this writing, has secured $140,000 worth of pledges. The lowest pledges are now at $249. The first batch will be delivered in October of 2015. You can also opt to pledge for the Flyte makers Kit which allows you to build your own levitating object.








How to Install Windows Boot Camp Without An Optical Drive

hongkiat.com - vr, 24/04/2015 - 15:01

Editor’s Note: Previously, we published a post by Daniel Pataki on How To Install Windows on Mac when all else fails. Alvaro is one of the many readers who left a comment on that thread. Below is his version on how to get Windows Boot Camp, and thus, Windows, on your Mac.

I have a late 2009 27" iMac which has a built-in Optical Drive, one that is not operational anymore. I’m not sure why it refuses to work, but I tried cleaning it with canned air, which improved its condition a little because now at least it "swallows" the dvd and spins it – it just never recognises it. I also have a MacBook Air which I successfully installed Boot Camp on with the use of an external drive. Still, I wanted a way to install it without the drive.

What Didn’t Work

So I tried lots of things.

The first one, was enabling the Boot Camp Assistant app to create bootable USB drives. It didn’t work, because after the application created the USB drive, it made a partition and rebooted. I was supposed to see the windows installer, but instead, all I saw was a blinking white line on a black screen. After several minutes of this, I gave up and force-booted my computer.

Next, I tried creating a partition on my own, using disk utility, formatting it as FAT32 and then attempted to boot from the USB. This did not work either. When I booted my Mac in the boot option menu, it did not show the partition, nor the "bootable" USB.

And that’s when I found this tutorial by Daniel Pataki, which I tried on my MacBook Air and it worked like a charm, despite the long and complex process. When I tried it on my iMac, however, things didn’t go well. When I tried to boot the VM from the Boot Camp partition and install windows, the VM booted into a black screen saying "Missing Operative System".

Finding Plan B

I had given up on other methods, and I decided to sleep on the problem of installing Boot Camp on my Mac when I suddenly thought about the Apple Watch. You see, what Apple has always wanted is for us users to buy a new model of Mac whenever the older one cannot do something. It’s the answer to why certain Mac models can create bootable USB drives while others can’t.

I then asked myself if USB drives have the same restrictions. One thing led to another and this is the way I install Windows on My Mac now. And it is way, way easier.

What Did Work

Here’s what we’ll be doing:

  1. Create a Bootable USB
  2. Create Partition
  3. Install Windows

Yes, it’s really that simple.

Create a bootable USB

1. Locate a Windows PC.

2. Download two things: a Windows 7 USB download tool directly from Microsoft, and a full Windows ISO of the version you want to install.

3. Open the Windows 7 USB download tool and browse to your ISO file, click continue and follow the instructions in the next section to create your Bootable USB.

Create a Windows Partition

We will be using Boot Camp Assistant.. well, sort of.

1. First, we need to make the application recognise USB drives. Go to Finder > Applications > Utilities, and right click on Boot Camp Assistant, then click "Show package contents".

2. Navigate into Contents, locate the "info.plist" file then make a copy (do not move the original) of it to your desktop. If you like, make another copy as a backup, just in case something goes wrong.

3. Open the "info.plist" file located on your desktop, look for the line of text saying PreUSBBootModels and erase the "Pre" from there, save the file (CMD+S) and close it.

4. Drag the modified info.plist file from your desktop to the Contents folder we opened previously. It will ask you to Authenticate with your administrator Name and Password. Click Replace.

5. If you were to open Boot Camp Assistant now, and it crashes, that’s because it detected that a modification has been made. If this happens, open terminal and type the following command:

sudo codesign -fs - /Applications/Utilities/Boot\ Camp\ Assistant.app

Enter your Administrator Password and hit enter. Now you can open Disk Utility.

6. Make sure your Bootable USB is plugged in. Open Boot Camp Assistant and you will see 3 options.

Check Install windows, and hit continue, select the size you want to dedicate to windows and click Install. The process might take several minutes.

Install Windows

Once the Partition is ready, your computer will restart into the Windows installer, follow all the instructions, and enjoy your new windows partition!

Remember that when you finish the installation process, you should download and install the proper Boot Camp Support Drivers so that everything works perfectly.

Editor’s note: This is written by Alvaro Martinez for Hongkiat.com. Alvaro is a tech lover, Google fan, Android enthusiast, gamer and loves helping people solve their problems. You can reach him on Twitter , Facebook or Google+.








44 Handwriting So Neat And Beautiful You’d Be Jealous

hongkiat.com - do, 23/04/2015 - 15:01

For all our readers out there who are no longer students, we need to ask, when was the last time you held a pen? If you still do, when was the last time you’ve actually penned something that is not limited to signing your name on a credit card purchase?

For these masters of the handwritten note, writing by hand is almost a skill that is forbidden to have. I mean, just look at some of the mind-blowingly amazing way people are stringing together essays, math formulas and equations, lesson notes and thank-you cards with no grids or rulers, just tons of patience, highlighters and paper.

IMAGE: theorganisedstudent IMAGE: Twinsanity32 IMAGE: Hublublub IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: raincookieArt IMAGE: attackonstudying IMAGE: study-spo IMAGE: study-hard-now IMAGE: Pinterest IMAGE: imgur IMAGE: Pinterest IMAGE: Anhwriting IMAGE: Anhwriting IMAGE: Anhwriting IMAGE: Pinterest IMAGE: Pinterest IMAGE: blackmessydesk IMAGE: hellostudying IMAGE: textbooksandtea IMAGE: Reddit IMAGE: Pinterest IMAGE: tomlincuddle IMAGE: AllyRoche IMAGE: interpunctedthirty






30 Cool CSS Animations You Have To See

hongkiat.com - wo, 22/04/2015 - 17:01

We’ve previously published the creative text effects you can make with CSS, and many other cool things you didn’t think were possibly to make with CSS. This compilation however focuses on the many things you can animate with CSS, and many of these creations will make you raise an eyebrow or two.

From loading animations to toggles, and modal windows to shaking elements, this pile of 30 unusual and creative uses of CSS animation can open your mind to more ways you can play with CSS animations that you’ve probably never thought of before.

CSS Loading Animation By patrikhjelm

Seven animated dots shifting left and right to signifify a loading action.

Animated Shopping Cart Icon by jonitrythall

Cute animated effects for when groceries are added to the shopping cart. Scroll down for more.

Hamburger CSS3 only animation by Dawid Krajewski

Built with pure CSS, no JS or anything else.

404 animated Character By With An Es

At least with this error page, a developer is working on it. Even if it is a 404.

CSS Mars Landing by mgitch

We have landed on Mars! Made with CSS.

The Avenger By mariosmaselli

Can you hear hulk’s anger shake through the screen? Cool, right?

Day / Night toggle By jsndks

Now, you can toggle day and night with CSS. Genius idea!

Google Now 3rd party app by codecalm

Google Now third party apps, animated.

Clo clo By judag

Does a rooster move like that? You bet it does, complete with the jiggy neck. Great CSS3 practice.

Menu icon animation by mariusbalaj

A simple idea put to action; watch the menu button materialize when you scroll down.

Another CSS Preloader by Maseone

An awesome CSS rhythmic loading animation. Hypnotic, isn’t it?

Submit button by auginator

Click to submit, and the button animates the loading process until submission is complete!

Elastic SVG Sidebar Material Design by suez

Drag the white bar to the right to see an elastic sidebar effect.

Particle button By igcorreia

Do what the button says: hover for awesomeness.

Gooey button By Lucas Bebber

Click for the Gooey effect. You’ll get it once you see it, and you will click on it a few times more. Amirite?

Flipside button By hakimel

Click on any side of the Delete button and the button will flip according to where you click.

True hamburger menu! By CharlesSmart

A truly delicious hamburger menu. Click the hamburger for effects

Cruisin’ by yy

See motorbike go.

3D cube wave By waddington

Holy 3D Cube-sicles!

Signature animation By drygiel

Here’s a signature that is not actually a GIF animation, but instead a PNG sequence animated with CSS3.

Background gradient animation By quasimondo

This trick changes the background gradient from one color to the other in a smooth, continuous form.

Star wars toggle icon By rss

A hamburger menu gets transformed into lightsabers in battle (a cross).

GIF Style animation By jascha

Watch as a photo materializes from the midst of pixel art.

Focus in/out input animation By fluxus

A little animated pen animated writes atop the forom you are filling in.

Chromatic triangleBy felipedefarias

An awesome optical illusion, yes, done with CSS3.

Coffee maker By thisisroger

Here’s a reminder to take your daily dose of coffee. Like you need one.

Chrome Dinosaur By nickspiel

Can’t reach the page you want beacuse of a dropped connection? Here’s the dinosaur you always see when that happens, only this time it is running from a meteorite!

CSS shake By elrumordelaluz

Hover over each effect to watch the little guy shake.

Newton’s Cradle Loader By All Things Smitty

If you know physics, you certainly know Newton’s cradle, but probably not like this.

Launch the Modal By koolhaus

Click to see the nice and smooth modal window animation.

Walking Robot By P233

This robot just keeps walking, and walking, and walking, around the Y axis.

Flexing Pagination Arrows By Hakim

From the first page to the last, this pagination animation shows clearly how if you are faring, pagewise.

Now Read:
15 Beautiful Text Effects Created with CSS






10+ Services & Tools To Convert Designs To Codes

hongkiat.com - wo, 22/04/2015 - 15:01

After brainstorming your designs, being able to finally see a working end product is pretty much one of the more satisfying aspects of the software development process. On the other end of the spectrum, bridging the gap from final design to working code can be taxing, not-very-satisfying and for some, a nearly insurmountable obstacle. PSD to HTML/CSS conversion can be a time-consuming and an error-prone endeavour – unless you love writing code.

There are fortunately a number of companies that will do the conversion for you. All of the companies listed below offer good conversion services. A few stick mainly to PSD to HTML conversions, while others offer a wider variety of services. Prices, methods of payment, and turnaround times will naturally vary, all you need to do is approach them and ask for a quote.

PSD To Manythings

PSD to Manythings offers a multitude of conversion services such as converting Photoshop designs to HTML, and delivering any type of markup. They provide assistance during any phase of your design and development process including in building an e-Commerce or e-Shop app, or in PSD to Responsive HTML Conversion.

With a worldwide clientelle, an excellent reputation, and recognition by WooCommerce, it is among the top 10 companies in most software developer’s lists. You can count on them to deliver squeaky clean, well-documented code or even a website upgrade if that is what your site needs.

Chop-Chop.org

Chop-Chop.org has a sterling reputation in turning PSD to code, and their support of 30 to 90 days after you’ve placed an order with them cements that solid reputation. If your project scope is yet to be defined, you can opt for their services on an hourly basis.

They accept any standard-format design file, and deliver hand-coded, SEO-compliant, HTML/CSS files to your email in basket in short order. Considered to be a premier software development and conversion startup company, Chop-Chop has clients in over 30 countries.

PSDgator

PSDgator is a team of web developers based in Greece. They offer services ranging from PSD to HTML/CSS conversions to converting WordPress themes and providing responsive designs. PSDgator offers fast delivery, and free reviews and consultations for your project before you send them payment. A free, upfront review can save everyone’s time — and trouble, if there is any feature of your design that does not lend itself to the conversion process.

If you need to have your current website re-sliced and re-coded, they can do that as well.

Direct Basing

Direct Basing offers discrete slicing and a fast turnaround. They can convert your Photoshop design to WordPress, Magento, or Joomla.

More than 2700 clients have taken their designs to Direct Basing, an dthey have over 10,000 projects completed for their international clientele up on display on their website’s portfolio section. You will be duly impressed. Upload your design file, get a quote and try their high quality and affordable slicing service.

Pixel2HTML

Pixel2HTML is a frontend development company that can transform your design into great HTML/CSS code. They can also implement it on WordPress, Tumblr, Shopify and other platforms as well. It you are looking for a responsive website, retina support and animations for your site, it’s in their job scope.

Their team is super-friendly and willing to help at any time. Send them PSD / Illustrator / Sketch files and they will convert them to great-looking websites.

PSDHTML.PRO

It’s always helpful to be able to see a few examples of a design- to-code conversion, and PSDHTML.PRO’s output portfolio is really quite impressive. You can either submit your order and pay upfront for one of their standard packages, or wait for a specific quote.

A wide range of options is available, and most orders will be processed and the code returned to you via email within 24 hours. Services include PSD to HTML, PSD to XHTML, and PSD to HMTL5/CSS3.

XHTMLized

If you need to have a sketch converted to HTML, a beautiful and polished design converted to responsive code, or anything in between, XHTMLized is up to the task. Front-end services include pixel-precise conversion to cross-browser compatible, semantic HTML5/CSS3/JavaScript code. Backend services include design conversion to a fully functional website, including WordPress projects. If Email is a part of your marketing approach, several options are available, including responsive layouts.

Retina-ready support is also available on request, and their development team members are absolute masters when it comes to providing animation support.

Reliable PSD

Created by an actual web design agency, Reliable PSD promises to "pick up the slack" where other companies fall short. "We know what designers need better than anyone. After all, we’re designers ourselves!" stated Louisa Levit, Reliable PSD co-founder

.Their service features beautiful code written by a carefully curated team, and super-friendly service from people who truly understand the needs of freelancers and agencies.

CSSChopper

CSSChopper has accomplished a great deal in a little over 5 years in the business. They have completed nearly 13,000 projects for over 9,000 clients, so they must be doing something right. They can of course do the best PSD to HTML conversions for you, but if you have a website, they can take it, re-engineer it, and convert it to a fully responsive one.

You won’t have to start from scratch to reach the mobile crowd. They offer CMS implementation and E-commerce integration services as well.

PSD To Convert

You have every right to expect handwritten pixel-perfect, W3C-validated code for your money. PSD to CONVERT goes an extra step. They are somewhat fanatical when it comes to ensuring your code will be bug-free. Freedom from bugs is a top priority of theirs, whether your project is PSD to XHTML, HTML Responsive, WordPress, Drupal, or Joomla

As where responsiveness is concerned, they make sure your code functions and displays correctly across all major browsers and platforms.

netlings

Netlings’ services include PSD to HTML, PSD to Email, PSD to Shopfly, and PSD to WordPress. They are a small company, which has nevertheless amassed a global clientele. Their PSD to HTML conversion services include Responsive, Desktop, and Mobile. Turnaround is generally 1 to 2 business days and your projects’ markup and CSS will always adhere to W3C standards with fast-loading functionality always a priority.

ExciteMarkup

All of ExciteMarkup’s PSD to HTML code conversion is done manually. The results are 100% W3C compliant and cross-browser compatible. Your design will be in safe hands, as the company will always work with you under strict NDA rules.

Additional services include CMS implementation, Ecommerce integration, Responsive design, and mobile templates. ExciteMarkup claims not to compete with others but only with themselves, to give you awesome service.

htmlMafia

htmlMafia provides a basic PSD to HTML conversion service. You pay half upfront, and the balance after you have had a chance to preview their pixel perfect, standards-compliant markup via a demo link.

There is however a money-back guarantee if you are not satisfied with what you receive from them. They work with you under a strict NDA, so your design is always perfectly safe.

HTMLPanda

HTMLPanda will take your design idea, slice it, code it, and produce an excellent digital outcome. They offer services, including web development, mobile apps (including hybrid mobile apps), and e-mail marketing templates. Mobile app platforms they consider include Android, iOS, Blackberry, and Windows Phone.

HTMLPanda is a full-service web development company with an international clientele, and they are at your service 24/7.

Bonus: A Tool Webbsy

Webbsy is not your typical Photoshop design to coded webpage service – in fact, it is not a service at all. Webbsy is a plugin that instantly converts PSD to HTML/CSS. It can be a real time saver, and you will be guided through its straightforward, step-by-step process.

You can download it for either Adobe CC or Adobe CS6. Best of all, you can try it free for 14 days!

Conclusion

It could be difficult to make a wrong choice among the companies listed here if you’re looking for fairly straightforward PSD to HTML/CSS conversion services. If you are in need of other services, you will still have a number of options to choose from.

If you know of a company that you believe should have made the list but didn’t, please leave a comment below.

Now Read:
Top 20 PSD To HTML Services






12 Free Ebooks to Teach You Blogging and Content Marketing

hongkiat.com - di, 21/04/2015 - 17:01

For those who are serious about blogging or just cannot seem to get their blogs to take off, sometimes all you need is some first-hand tips from the experts themselves. We hear you and since there are plenty of such ebooks lying around online, we’ve done the legwork and collected 12 such eBooks that are great collections of blogging experience, knowledge and tips that are the result of years of trial and error from those who have been there, done that.

Here you’ll see free ebooks on how to start blogging, how to become a successful writer, how to get money with blogging and get traffic, how to organize your blog and create strong visuals, and more. So, scroll down and enjoy!

Editor’s note: 7 of the books below are available absolutely free; the links you see are the direct download links. The last 5 books require some form of registration or at least an email address to download.

1. How to Start a Blog

This book is a step-by-step guide on how to setup your blog and make it successful. The ebook contains 7 chapters to help you set up, maintain, monetise, and promote your blog along with helpful resources and tools for bloggers. Ogi Djuraskovic is behind FirstSiteGuide, and a web enthusiast who helps people start their own blog/site. Other team members of FirstSiteGuide who took part in writing the ebook are experts in hosting, marketing, SEO and design.

Authors: Ogi Djuraskovic, Kristi Hines & the FirstSiteGuide Team

Available in: PDF

2. 365 Writing Prompts

365 Writing Prompts was written by The Daily Post team who do all kind of jobs (from blogging to coding) and have the goal of helping people start their own blogs. Get this on your reader, tablet or laptop and get inspirational prompts on each day of the year to write. For example, for June 20, you will get, "Moment of kindness. Describe a moment of kindness, between you and someone else — loved one or complete stranger.” Also available in Spanish, French and Indonesian.

Author: The Daily Post

Available in: PDF | Kindle | iBooks

3. Blogging For Dummies, 4th Edition

If you feel like a complete dummy in blogging, this ebook will teach you a lot new things in simple language. This ebook is helpful for amateurs and pros, who want to integrate their blog with social media and optimize it for search engines. Susannah Gardner is a writer and editor who helps people say exactly what they want to say, and the co-author, Shane Birley is a technologist (with a literature degree) who helps people build stuff online.

Author: Susannah Gardner, Shane Birley

Available in: PDF

4. Who’s There?

Seth Godin is an american author, marketer, and speaker, who doesn’t really need an introduction. Despite the title, Incomplete Guide to Blogs and the New Web, this ebook is not going to tell you how to set up your blog to sell your products. It’smore about the influence of blogging on your future, career, ideas and the whole lifestyle that comes with.

Author: Seth Godin

Available in: PDF

5. The Blogger’s Workbook

This 10 page ebook was written by web designer and developer Heather Jones, who has been creating animated graphics for over a decade. The Blogger’s Workbook is her first ebook with first-hand tips. In this ebook you’ll find information on how to start a blog, add proper categories, schedule your articles, guest posts and more.

Author: Viva la Violette

Available in: PDF

6. A beginner’s guide to creating visual content

As we live in the world of overloaded information, to create a really awesome blog you need to not only write a good copy, but also frame your articles with proper images and other visual element. This 60-page ebook will tell you how to create high-quality images, photos, graphs, infographics and other design elements for your blog.

Author: Shannon Johnson, Keith Frankel and Jon Smith

Available in: PDF

7. Pocket Guide to SEO

Forty agency has been designing remarkable user experiences for over a decade. If you have a blog, but have no visits then this is the guide you need. This awesome 15-page Pocket Guide to SEO will tell and show you everything you need to know about SEO: proper keywords, headlines, descriptions and more.

Author: Kim Stearns

Available in: PDF

8. How to Write Magnetic Headlines

Copyblogger is a software and training organization which provides expert advice, exceptional products and smart copywriting. This ebook is an in-depth guide on how to write killer headlines, touching on mistakes to avoid, working formulas, templates you can use and more. It is part of a 14-book how-to series on everything to do with content marketing, which you can get if you register on the Copyblogger site.

Author: Copyblogger

Available in: PDF (Editors Note: This link is from a university site. Otherwise, the book is only available upon registration.)

9. A Simple Guide to Blogging for Business

Wishpond is a company which helps people to create, publish and track their online marketing campaigns. They have worked with Facebook, Twitter, Mailchimp just to name a few brands. This ebook will help you to understand all the benefits of having great content on your site. You will be taught how to start blogging, find your target audience, write good content, promote your blog, measure results and more.

Author: wishpond.com

Available with registration

10. How to Make Money Blogging

Crystal Paine is a wife, mom of three, and speaker. In 2007 she founded MoneySavingMom.com, which has over a million unique visitors and around 4 million pageviews per month. If you have a blog and want to get money with it, you going to need this ebook. It shares insider tips and tricks on how to monetize your blog as well as list useful resources for blogging.

Author: Crystal Paine

Available with Noisetrade account, Facebook login or email address.

11. A Definitive Guide To A High-Traffic Blog

There are thousands of blogs out there around the Web. Thus, it’s really difficult to create a blog which will stand out from the rest ones. This ebook is packed with 15 years of experience and 14 sections of advice on how to find writing ideas, create competitive content, overcome writer’s block and draw visitors to your site.

Author: Todaymade

Available with email address

12. How to Build a Blog with 10,000+ Subscribers

Here is an ebook that will tell you how to grow your email list up to 10,000 subscribers in just 12 months. Glen Allsop moved to South Africa when he was 18, to be a social media manager for huge brands like Land Rover, Nissan and Hewlett Packard. These days, he is a successful blogger who runs his own marketing company and helps people make a living online.

Author: Glen Allsopp

Available in with email address

Now Read:
14 Free Ebooks for Web Designers






Using and Styling HTML5 Meter [Guide]

hongkiat.com - di, 21/04/2015 - 15:01

If you’re familiar with the HTML progress bar, which shows how much of an activity has been performed, you will find that the meter element is similar to that – both show a current value out of a maximum value. But unlike the progress bar, the meter bar is not to be used to show progress.

It is used to show a static value in a specific range, for example you can indicate the storage space used in a disk storage by showing how much of the storage space is filled and how much is not.

On top of that, the meter element can also be used to visualize up to three regions within its range. Reusing the storage space example, instead of only showing how much space is occupied, you can also visually indicate whether the occupied space is only sparsely filled (lets say below 30%) or near half full (between 30 to 60%) or more than half full (above 60%) using different colors. This helps the users know when they are reaching the storage limit.

In this post, we’ll show you how to style the meter bar for both purposes mentioned i.e. a simple gauge (with no indicated regions) and two examples of gauges with 3 color-indicated regions. For the latter, we will work on creating a "marks" gauge for showing poor, average and good marks, and a "pH" gauge for showing acidic, neural and alkaline pH values.

Attributes

Before we start with the examples and go in-depth, let us take a quick look into its list of attributes below, more about these attributes like their defaults, etc. will be covered in the examples.

  • value – The value of the meter element
  • min – The minimum value of the range of the meter
  • max – The maximum value of the range of the meter
  • low – Indicates the low boundary value
  • high – Indicates the high boundary value
  • optimum – The optimum point in the range
1. Styling A Simple Gauge

Here’s a very simple example using only one attribute, the value. Before we proceed, we need to know three things first:

(1) There is a default min and max value defining the range of meter, which is 0 and 1 respectively.
(2) If the user-specified value does not fall within the meter range, it will take the value of either min or max, whichever it is closest to.
(3) The Ending tag is mandatory.

Here is the syntax:

<meter value="0.5">0.5</meter>

Alternatively, we can also add min and max attributes thus providing a user defined range like so:

<meter min="10" max="100" value="30"></meter> 2. Styling The "Marks" Gauge

First, we need to divide the range into three regions (left/low, middle, right/high). This is were low and high attributes come into play. This is how the three regions are divided.

The three regions are formed between min & low , low & high and high & max.

Now it is obvious that there are certain conditions low and high values should follow for the three regions to be formed:

  • low cannot be less than min and greater than high & max
  • high cannot be greater than max and less than low & min.
  • And when a criteria is broken both low and high will take on the value of the other variable in the criteria which is not satisfied, i.e. if low value is found lower than min which it shouldn’t be, low will get the min value.

In this example, we will consider our three regions from left to right to be:

  • Poor: (0-33)
  • Average: (34-60)
  • Good: (61-100)

Hence, the following are values for the attributes; min="0" low="34" high="60" max="100".

Here is an image visualizing the regions.

Even though there are three regions in the meter we created just now, it will indicate only two "kinds" of regions in only two colors at the moment. Why? Because optimum is in the mid-region.

Optimum Point

In whichever region (of the three) the optimum point falls in, it is considered as an "optimal region" colored green by default. The region(s) immediately next to it is called the "sub-optimal region" and it is colored orange. The one farthest away is a "not-much-of-an-optimal region", colored red.

So far in our example we have not assigned a value for optimum. Hence, the default value becomes 50, making the mid-region the "optimal region" and the ones right next to it (both on the left and right) as "sub-optimal regions".

In short in the above case, any value to the meter element that falls into the mid-region is indicated by green; the rest orange.

That’s not what we want. We want it colored this way: Poor (red), Average (orange), Good (green)

Since the right-region is to be considered our optimal region, we will give optimum a value that will fall into the right-region (any value between 61-100, including 61 & 100).

We’re taking 90 for this example. This will make the right-region "optimal", the middle (its immediate next region) "sub-optimal" and the far left the "not-much-of-an-optimal" region.

This is what we will get on our gauge.

2. Styling The "pH" Gauge

First, a breather on pH values. An acidic solution has a pH of less than 7, an alkaline solution has a pH of greater than 7 and if you land on 7, that’s a neutral solution.

Thus, we will use the following values and attributes:

low="7" , high="7", max="14", and the min will take the default value of zero.

Before we add the rest of the attributes to complete the code, let us decide on colors: Acidic (red), Neutral (white) and Alkaline (blue). Let us also consider the acidic region (left-region below 7) as "optimal"

Here are the CSS pseudo elements we will target to get the desired visual in firefox. (For the webkit meter pseudo elements and more, refer to the links listed under "reference".)

.ph_meter { background: lightgrey; width: 300px; } .ph_meter:-moz-meter-optimum::-moz-meter-bar { background:indianred; } .ph_meter:-moz-meter-sub-optimum::-moz-meter-bar { background: antiquewhite; } .ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: steelblue; }

Here is the complete html code and the final result of the pH gauge.

<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="6"></meter> <meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="7"></meter> <meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="8"></meter> References

More on Hongkiat: Creating & Styling Progress Bar With HTML5

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.








9 Javascript Libraries To Build Interactive Charts

hongkiat.com - ma, 20/04/2015 - 17:01

So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be difficult for them to understand. This is why you need help from charts. In web design, charts are one of the best tools for data visualization. It is easy to read, easy on the eyes and relatively easy to set up.

But let’s take things up a notch: let’s add animation and interactivity to those charts, so that readers can not only learn something new from the chart, but also play with it. It is actually easier than it sounds, thanks to a number of JS libraries out there. Let’s check them out.

1. Chart JS

Chart.js is a no-dependency library to build charts in 6 different types: line charts, bar charts, radar charts, polar area charts, pie and donut charts. The library is also split according to chart type so your pages aren’t bogged down with what is not needed. It supports responsive design and you can easily change variables like color or animation to customize the chart interface.

2. Chartist JS

Chartist JS is great library to build responsive charts that make use of SVG. Besides its responsiveness, Chartist gives you flexibility by using clear separation of concerns: style with CSS and control with JS. To make customization easier, the SASS files are included. The great thing here is you have limitless options to animate your chart using the Chartist animation API, SMIL, which gives you additional animation options.

3. C3 JS

C3 JS is a library to build charts based on D3 JS. It wraps up the required code to build charts with D3 JS, so you can skip writing the D3 code, and just input your data. C3 comes with a variety of API that you can use to control your charts easily. To customize your chart, define your own custom styles to the given CSS classes. Build charts from simple line charts to gauge charts. Check out this page to see how the library works.

4. Flot

Flot is a jQuery plguin for creating charts with interactive elements like turning a series on or off, data point interactions, panning, zooming and more. Flot comes with a variety of chart type options and if you want more ability on your chart, here are some plugins you can use as well. The charts will work well with browsers that support HTML canvases.

5. EChart

Echart is an amazingly comprehensive library from China which supports multiple chart types, can process big data (plotting up to 200,000 data points on a Cartesian chart), has scale roaming, the ability to effortlessly extract, integrate, and exchange data among multiple charts, allowing one to easily switch from one data type to another, and a whole lot more.

6. Peity

Peity will add a mini chart to your web page. It is a small jQuery plugin that transforms an element into a mini svg line, bar, donut, or pie chart. You just need to create an element and give a value like 1/5 and make a call peity('pie') on that element to make a mini pie chart. For instance, to create a donut chart that is only one-fifth highlighted, here is the HTML:

<span class="donut">1/5</span>

You can customize the chart color, radius, width and height, but by default it’s displayed in small size.

7. DC JS

DC JS has similarities with C3 JS in terms of engine used; they both use the D3 library to render charts in SVG. DC JS is created to help you visualize data and analysis for browsers and for mobile devices. Since it leverages on the D3 JS, it allows you to add user interaction to your chart. DC JS is one powerful library to create charts from simple to high complexities.

8. Google Chart

You can create interactive charts and data tools using the Google Visualization API via Google Chart. There are chart galleries to check out Google Chart’s data visualization capabilities. To start, embed simple JavaScript to your web page to load the Google Chart libraries you need. Then list the data you want charted, and make some customizations through the chart options. Finally create a chart object with an id, and on your web page, create a <div> with that id to display your chart.

9. NVD3

NVD3 is a set of reusable charts and chart components that are built with D3 JS. This library is hence a ‘template’ that will help make it easier for you to build charts. Check out the many sample charts built with NVD3 here.

Now Read:
JavaScript Libraries to Create Interactive & Customized Maps






HipChat Keeps Your Team Connected Across Multiple Platforms

hongkiat.com - ma, 20/04/2015 - 15:01

Editor’s note: This article is brought to you by HipChat.

Communication can be a problem when it comes working online and remotely. Requirements, reminders and reiterations can get lost when a message gets passed from one team member to the next. There are also so many things that could impede the workflow or work process of your team, things like working in different time zones, or even working on different operating systems.

If this is you, then you might want to try out HipChat. HipChat is a group chat service that caters to most, if not all, of the major desktop and mobile platforms out there. It is also available as a web app, and provides written, audio and video conferencing tools to help you get your message across to your team members.

Getting Started With HipChat

To register, HipChat needs your name, work email and password. You can start inviting team members at this point or leave it for later. Check your email for a nudge by HipChat to confirm your email address. Once you activate your account, you will end up here.

You can download the native HipChat app for your Mac, Linux or Windows, or get it on mobile for Android (4.0 and above) and iOS (iOS7 and above), or if you aren’t at your own computer, launch the web app instead to begin chatting.

Note: This review will center around the web app.

Getting Around In HipChat

Once inside the web app, you will be at the Lobby, where you can find all the Rooms that were created and People who are on HipChat. Toggle betwen the two groups to get a more filtered list; or if the place is too crowded, the filter search bar can help narrow down your destinations.

Once you click into any of the rooms or any of your team member’s name, the item(s) will be added to the left sidebar. This makes it easy to jump from one chatroom to the next.

Availability

The availability status of each team member helps give you an idea of when is a good time to approach them. There are three statuses available: Available, Away and Do Not Disturb, depicted in the customary green, yellow and red signal colors. To change your own status, you can do so at the top right hand side of the interface, or use the commands: /away, /dnd, or /back (for Available).

New Chat

Click on any of the available Rooms to start chatting with your team members, or click on a team member’s Name to go into 1-on-1 chat mode. At any time you want to start a new room, click New Chat. Give it a name, and a topic and choose the privacy access (Open or Private) for the room.

Room Features

In the conversation threads (rooms), you can use emoticons, share files of up to 50 MB per file, links and even gifs (check the Integration section). With the native apps, you can also find support for video calls, audio calls and screensharing (only during the trial period).

In 1-on-1 chat mode, all shared files and recently shared links, on the right sidebar. In rooms with a larger pool of participants, you will find an additional list of participants for the chatroom, along with options to rename your room, topic and toggle access settings on the right sidebar. Here’s also where you can find the Integrations feature.

Integrations

One thing HipChat does that takes it up a notch compared to other group chat services is that you can extend its capabilities via add-ons. HipChat comes with 59 add-ons you can get including Asana, GitHub and Hip Gif (to add gifs with the /gif command). These integrations feed notifications from those services into HipChat. Now, you no longer have to pick a tool for all your team mates to migrate to – you can have them all.

Pricing Plans And Features

During the 30-day trial period, you will have access to all the features. The moment the trial period is up, you lose access to screensharing, audio and video calls, and searches on unlimited chat history (which will be capped at 25,000 messages for the basic plan).

The file storage capacity is also now capped at 5 GB unless you opt for its premium plan, HipChat Plus. Rates are at $2/user/month, and you can cancel at any time and will only need to pay for the last billing period. HipChat can also be deployed to your own server on special pricing rates (check out this link for discounts for academic organizations).

Limitation

During the testing period, I had a couple of connection problems.

  • With the web app, I kept getting disconnected and had to reload the page to get connected.
  • With the audio call feature, after I hung up, the call was not immediately disconnected on the receiver’s side. The receiver had to manually disconnect the call.

Nonetheless, the support HipChat provides looks solid, if its help center is to be taken at face value. The Help center even has a Suggestion and Ideas section which the team acknowledges and actively responds to.

Final Word

HipChat is a fun, simple, cleancut app to use and its wide range of support on popular desktop and mobile platforms make it a great addition to any organization, including those that operate remotely. The use of @mention, and the plentiful notifications via email, in-app, desktop and even via sms, does its part in trying to keep remote teams continuously updated and connected.








15 jQuery Plugins To Make Smart Sticky Elements

hongkiat.com - vr, 17/04/2015 - 17:01

It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar. This allows for the element to be readily available regardless of the user’s position.

Called a sticky element, this can be achieved just by using CSS, however, using this method, the effect is not reliable across multiple browsers. That is why we’ve put together a handful of JS libraries and jQuery plugins that will allow you to achieve this particular UX design with little to no hassle.

1. Waypoints

Waypoints is a library to execute a function based on the element position in the viewport. It comes with an shortcut function that makes that element “sticky”. You can customize the scrolling direction — up, down, and even right and left — as to which the element should stick within the viewport.

  • Dependency: None / jQuery (optional)
  • License: MIT license
2. Sticky Kit

With StickyKit, not only can you make an element stick within the viewport, but you can also make them stick within the parent element you designate to multiple elements at once. The plugin also comes with some advanced settings including custom Events and Triggers.

  • Dependency: jQuery
  • License: WTFPL
3. StickyJS

StickyJS is an easy-to-use jQuery sticky plugin that does what it says. The plugin works out of the box. Yet, if you need some customization, it comes with Options/Settings, Custom Methods and Events.

  • Dependency: jQuery
  • License: MIT license
4. HeadRoom

A sticky site header will take up valuable vertical space that makes a difference when you view the site on mobile. Headroom is a JavaScript library that will make your sticky header smart; the header will be hidden when users scroll down the page and show up upon scrolling up.

  • Dependency: None / jQuery (optional) / Angular (optional)
  • License: MIT license
5. MakefixedJS

Makefixed lets you make elements be fixed dynamically as users scroll the page. Just call the makeFixed() function on the element you want fixed. Check the demo to see it on action.

  • Dependency: jQuery
  • License: GPL
6. MidnightJS

Midnight allows you to stick multiple headers / elements and switch between them based on their position within the document (DOM tree), check out the demo to see what I mean. In addition you can change their color on the fly simply by adding the data-midnight attribute with the specified color name.

  • Dependency: jQuery
  • License: MIT license
7. ScrollMagic

ScrollMagic has advanced features to add interaction, during a page scroll. You can pin elements from specific scroll positions, add animation based on scroll position, or even make an awesome parallax effect. The demo gives you some insights of what this plugin can do.

  • Dependency: jQuery / Velocity.js
  • License: Dual License (MIT and GPL)
8. onScreen

onScreen is similar to Waypoints — it allows you to execute functions as the element is entering, leaving, or reaching certain positions within the browser viewport.

  • Dependency: jQuery
  • License: MIT license
9. jQuery Pin

jQuery Pin is a small jQuery plugin to “pin” or “unpin” elements to a position, when you scroll the page. My most favorite part of this plugin is the option to disable it at certain viewport widths.

10. Sticky Float

Sticky Float allows us to give elements a fixed position that is relative to its parent. You can set the sticky option according to your needs with the provided parameters and by changing the value. Catch the demo here.

  • Dependency: jQuery
  • License: Undefined
11. Zebra Pin

Zebra Pin is a lightweight plugin to make any element pin to their container. With this plugin you can add "sticky-ness" to elements in your project like to your navigation, sidebars, headers and footers, or other elements that you want to keep visible when users scroll down. Check out the demo.

  • Dependency: jQuery
  • License: GPL license
12. HC-Sticky

With HC-Sticky, you can make sticky elements that refer to its container, to any given element, or to the document itself. This plugin has some options that you can adjust to your need, like distance from the top and bottom to start floating, and other options.

  • Dependency: jQuery
  • License: MIT license
13. Sticky Mojo

Sticky Mojo is a lightweight, fast, and flexible jQuery plugin to make awesome sticky elements. It’s compatible with modern browsers and will degrade gracefully in IE.

  • Dependency: jQuery
  • License: MIT license
14. Sticky Navbar

If you want make single page navigation which sticks when one scrolls down, this library is for you.Sticky Navbar will put the navigation at the top of the browser window and highlight the anchor link to connect to the corresponding section on your page. You can also add Animate.css to beautify the navigation effect.

  • Dependency: jQuery
  • License: MIT license
15. StickyStack

StickyStack will make elements stack with another when users scroll the element and reach the top of the viewport. With this library, your long page will transform into stacked cards.

  • Dependency: jQuery
  • License: Undefined







Top 15 QuickStarts for OpenShift

hongkiat.com - vr, 17/04/2015 - 15:01

We previously wrote about the apps you can use to get started on OpenShift, the cloud platform service that offers free quota usage. Today we are going to look at QuickStarts instead.

QuickStarts, as the name suggests, allow you to "start quick" with OpenShift by auto-combining an app’s source and its requirements to easily launch new apps. It is an add-on that makes it easy for someone to get started with an application or framework on OpenShift. Put simply, it allows you to enjoy a custom-hosted service, let’s say a blog or cloud storage, for free without going through installation hassles.

In developer speak, a QuickStart is simply a Git source code repository that’s paired with one or more cartridges. In layman’s terms, a QuickStart extends the Red Hat’s cloud platform by bringing some technology (application or framework or app stack) to OpenShift. Here are 15 QuickStarts that you should probably check out on OpenShift. If you have more to add to the list, share with us in the comments.

ownCloud

ownCloud is a self-controlled and self-hosted free and open source Cloud. It hosts a plethora of features such as responsive design, sharing options, mobile and desktop sync, external storage, version control, collaborative editing and much more.

LiveOak

LiveOak lets you focus on your mobile app development by providing a flexible and easy to use platform. It provides all the necessary mobile services such as storage, security and single sign on, push notifications and more.

MEAN

MEAN is a friendly JavaScript fullstack for web applications. MEAN stands for MongoDB, Express, AngularJS and Node.js. It simplifies and accelerates web app development, and allows you to build fast and scalable web applications.

CapeDwarf

CapeDwarf is an open-source alternative to Google App Engine. It allows you to run your Java applications written for Google App Engine on WildFly Application Server with zero modifications. It lets you easily migrate your GAE application to your own private cloud.

Tiny Tiny RSS

Tiny Tiny RSS is an online feed reader and aggregator, designed to allow you to read news from selected sources. It features multiple sharing options, podcasts, JSON-based APIs and much more. It supports plugins and themes, and has an official client for Android.

Django

Django is the most popular web application framework for Python. It follows the model-view-controller (MVC) architectural pattern, and eases the creation of complex, database-driven websites. It focuses on rapid development, and reusability and plug-ability of app modules.

Ruby on Rails

Ruby on Rails or simply Rails is the popular web development framework for Ruby. It uses the model-view-controller (MVC) framework, and emphasizes the use of well-known software engineering paradigms like don’t repeat yourself (DRY), convention over configuration (CoC), etc.

Bolt

Bolt is a simple and lightweight content management tool. It has a fully responsive backend interface, and supports Twig templates for customizing the frontend. It features a slick content editor, powerful content types, user management, branding, extensibility via plugins and much more.

CodeIgniter

CodeIgniter is an open source PHP framework for easing web development. It simplifies your web development task by providing a simple and elegant toolkit to kickstart your app development. It encourages model-view-controller and provides a rich set of libraries for commonly needed tasks.

Tornado

Tornado is a scalable non-blocking, asynchronous web server and lightweight web application framework for Python. Tornado provides high performance in comparison to Apache or other web servers. It’s ideal for long-polling and other apps that require long-lived connections.

Moodle

Moodle is a learning management system that provides a collaborative teaching environment for educators. It creates a private teaching and learning environment filled with dynamic courses by administrators or teachers for students.

RhodeCode

RhodeCode is a code collaboration and repository system for Git and Mercurial version systems. It features a code review system, project insights, permission and authentication system, simple but powerful API and much more.

GNU Social

GNU Social, formerly StatusNet, is a free micro-blogging platform, much like Twitter. It is a social communication software for both public and private communications. It is a widely supported network service that supports single-user and community modes.

Fedena

Fedena is an open source school management system. It has more features than an information system and is suitable for students, teachers, parents as well as system administrators. It features various grading systems, SMS tracking, pay slips, parent login, messaging system, etc.

Jekyll

Jekyll is a simple, blog-aware static site generator, which means it converts plain text into static websites that work without databases. It’s the same engine that powers GitHub Pages. It supports Markdown or Textile, custom layouts, posts and pages, permalinks, etc.

Now Read:
Top 15 OpenShift Apps






How To Create A Static Blog Using Cactus [OS X]

hongkiat.com - do, 16/04/2015 - 17:01

If you do not require a CMS and would prefer just getting a static site or blog, then Jekyll is a good tool to take a chance with. However, if you prefer a tool with a GUI, rather than working with command line tools, then you might want to check out Cactus.

Cactus is a free static site generator equipped with powerful tools that can help you build websites locally, faster and easier with modern web technologies. It gives you a starting point in your project with 4 predesigned templates so you can hit the ground running.

While working on your project, Cactus will monitor every change you make on your project and automatically refresh the browser so you can see the changes immediately, on your Mac or mobile device. It also supports SASS/SCSS and Coffescript out of the box, so every change on this file is also automatically generated.

Get Started

First of all, you need to download Cactus from its homepage, then run the installation. Once complete, open it, you will see four buttons: Create, Deploy, Edit, and Preview button.

To create a new project, click Create. You will see 4 templates available there. For this tutorial, we are going with the Blog template. Click Create.

You will be asked to give name of your project and choose the location where the project exist. Here i give name “My Awesome Blog” for the project. After that, you will see your project already in Cactus.

Modifying Files

The generated project using Blog template now exists on your Finder. We will now inspect the elements required to build our Blog. Head over to the directory where your files are kept. The main directories that we will use are Templates, Pages, and Static directory. Let’s skip the others for now.

To keep things brief, here’s what each directory is for:

  • Templates: Contains HTML files which behave as template, used by HTML files on pages to build on.
  • Pages: Contains all HTML files that will become a page with the same path. eg: hello.html here will become http://yoursite.com/hello.html
  • Static: Contains all static resources like CSS, Javascript and images.

Now, we will edit three main files from the directories: base.html and post.html in the Templates directory and index.html in the Pages directory.

Cactus uses Django Template Engine for the templating language. With this, you can include HTML elements from other HTML files, so you don’t need to duplicate codes. The features that are most used here are template inheritance and variable.

To see how they work, first open the base.html on Template directory.

<!DOCTYPE html> <html lang="en"> <head> &#x9;<meta charset="utf-8"> &#x9;<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &#x9;<meta name="viewport" content="width=device-width, initial-scale=1"> &#x9;<title>{% block title %}Blog{% endblock %}</title> &#x9;<link rel="shortcut icon" href="{% static '/http://media02.hongkiat.com/static-blog-with-cactus/favicon.ico' %}">&#x9; &#x9;<link rel="stylesheet" href="{% static '/css/style.css' %}"> &#x9;<link rel="alternate" type="application/rss+xml" title="My Blog Feed" href="/rss.xml"> </head> <body> &#x9;{% block content %} &#x9;&#x9;Main content &#x9;{% endblock content %} &#x9;--- </body> </html>

base.html is the simple html file that we use as a ‘skeleton’ template. It contains common elements of our site. You can see some “blocks” in there; we will use the child template to override these blocks.

Now open the post.html located in the same directory with base.html.

{% extends "base.html" %} {% block title %}{{ title }} | Cactus{% endblock title %} {% block content %} &#x9;--- &#x9;<header> &#x9;&#x9;<h1>{{ title }}</h1> &#x9;&#x9;<h2 class="headline">{{ headline }} </h2> &#x9;</header> &#x9;<section id="post-body"> &#x9;&#x9;{% block body %} &#x9;&#x9;&#x9;This is where the post contents is. &#x9;&#x9;{% endblock body %} &#x9;</section> &#x9;--- {% endblock content %}

The post.html contains the markup for our blog entry page. At the first line you can see that post.html extends the base.html. This means we will override the blocks on base.html with the blocks here.

We can also find variables here, such as {{ title }} and {{ headline }}. We will define the values of these variables in the blog entries post later.

Now, lets look at the {% block body %} block. This will be overridden by the child template that contains the post entries of our blog.

Go to the directory pages/posts. Here are the rest of our post entries.

title: My Post Entries headline: My Post Headline author: Agus date: 15-01-2015 {% extends "post.html" %} {% block body %} {% filter markdown %} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- {% endfilter %} {% endblock body %}

In the post entries, we give value to the variable, like title, headline, author, and date. This value will pass when we call the variable name on the parent template. Then we write the content of our blog with Markdown.

Now we will go to the index page of our blog, open index.html in the pages directory. It contains the list of our blog entries and the link to the each entry. The main code looks like below:

{% extends "base.html" %} {% block content %} &#x9;-- &#x9;<ul id="post-list"> &#x9;&#x9;{% for post in posts %} &#x9;&#x9;&#x9;<li> &#x9;&#x9;&#x9;&#x9;<a href='/{{ post.path }}'><aside class="dates">{{ post.date|date:"M j" }}</aside></a> &#x9;&#x9;&#x9;&#x9;<a href='/{{ post.path }}'>{{ post.title }} <h2>{{ post.headline }}</h2></a> &#x9;&#x9;&#x9;</li> &#x9;&#x9;{% endfor %} &#x9;</ul> &#x9;-- {% endblock content %}

At this point we have a simple blog with two main pages, the index page that contains the blog entries, and the blog entry page itself.

Go to Cactus window, and click preview button to start the server. It will automatically open the browser and open your website.

Styling the Blog using SCSS

A great feature of Cactus is that it works with SASS/SCSS out of the box. Just drop your .sass or .scss files into the static directory and every time you edit and save the files, Cactus will automatically generate the CSS.

Here I will give an example using bootstrap-sass to styling our blog. Assuming you are using bower, open terminal, and navigate to the static directory of our project using cd command. Then install bootstrap-sass using this command:

$ bower install bootstrap-sass-official

Once the download is complete, you will see a bower_components directory inside the static directory containing bootstrap-sass-official.

Now go to this directory: static/css. Create the scss file, give it the name syle-bs.scss and insert this code.

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap";

What the code does is it import everything from bootstrap-sass. Once you save style-bs.scss, you will see style-bs.css generated on the same directory that contains all styles from bootstrap.

Deploy your Project

Lastly, when your project is ready, you can deploy your project to the live version easily using Amazon S3, just follow these steps to make it all work properly.








9 Tools to Test and Preview Your Newsletter

hongkiat.com - do, 16/04/2015 - 15:01

Marketing campaign by various big organizations rely heavily on emails that are sent to the target customers and audience. It is really important to preview these emails before sending them out because email protocols are not adequately intelligent enough. Different email clients on different devices display emails using their own standards. The result is an email with an unpredictable and dissociated appearance reaching the inboxes of many. To avoid this, we need to test it rigorously.

There are various email testing and rendering services that come with different features, sizes and pricing plans. These tools allow for emails to be previewed in various popular environment and inboxes to get an idea of how they would look. Here are 9 premium services to help you get started. Pricing plans, where listed, are included.

1. Email on Acid

Email on acid is a famous email testing and previewing software which allows users to preview an email on over 112 combinations of popular email clients and mobile phones. Also included is a spam test to identify which emails go to the spam folder, and code analysis to check the support of email clients for each line of code.

Email marketers will also be able to benefit from their library of tips and tricks where they also address identified bugs and their solutions.

[Price: 7-day free trial; Premium plans starting from $45/mth]

2. Litmus

Litmus comes with an interactive and real-time design with all required email previewing tools. It runs comprehensive testing on various aspects such as color blindness test, no-image view, plain text check, mobile preview and more.

This tool also runs link validation, code analysis, optimizes your email subject line for you and works well with your existing emailing software.

[Price:7-day free trial; Premium plans start from $79/mth]

3. Inbox Inspector

Inbox Inspector is a service offered by mailchimp. By using Inbox Inspector, one can compose an email and create campaigns by sending the email to mailchimp using a provided email address, without logging in. The email is previewed before it is sent out.

Inbox Inspector allows A/B testing to test the day, time of day and most effective subject line that may grab the attention of maximum audience. It also sends emails automatically based on time zones.

[Price: Mailchimp is free for up to 2000 subscribers with some feature limitations. Reports from Inbox Inspector cost $3/report for both paid and free plans.]

4. IBM Email Optimization

IBM Email Optimization (formerly known as Unica email optimization) is a noteworthy service to design and measure the efficiency of emails to be sent. Aside from previewing emails in environments such as AOL, yahoo, Gmail and mobile devices, IBM email optimization also lets you know if your IPs are blacklisted on any of the email server.

It also lets you test how the images in the email will appear at the receiving side. Though this software is premium but it could not be purchased online.

[Price: Not Listed]

5. previewmyemail

An email testing and previewing service which supposedly takes real screenshots of emails in different email clients both mobile and desktop then stores them in a central database hence ensuring no data gets lost.

The service enables to preview an email over 19 desktop email apps, 25 web based email apps and 4 mobile email apps.

[Price: Premium plans start from $49/mth]

6. Email Reach

This is an integrated email service software that provides email testing and rendering solutions. Email Reach helps you to know the exact status of a sent email whether it is delivered successfully into the inbox, rejected or received in the junk folder.

It has a built-in email verifier which cleanss mailing lists to make them ISP-friendly alongside real-time blacklist monitoring of IP addresses at various email servers.

[Price: 24-hour Free Trial; Premium plans start at $125/mth plus a $39 signup fee.]

7. Contactology

Contactology is the simplest to use service in this list because at the site, you are presented with a 3-step guide for the email simulation feature of the complete software package. The full-fledged service covers email creation, analytics and optimization.

Alongside email preview on more than 30 different clients (including mobile), Contactology also has features to help you determine the quality score for your email contents, automatic (triggered) messaging and more.

[Price: Free Trial; Premium plans start at $19.95/mth]

8. Inbox Preview – CampaignMonitor

Inbox Preview is a cost-effective email previewing service with an interesting costing strategy. But before we get to that, do know that with Inbox Preview, one can preview the email on more than 20 email clients including web-based, desktop and mobile.

It also comes with rigorous spam testing, a no-image view, and testing on different browser variations. Used by more than 400,000 companies, Campaign Monitor lets you try all its features and will only charge you once you start an email campaign.

[Price: Pay when you send – $5/campaign +$0.01/user; Monthly plans start from: $9/mth for 500 users.]

9. Lyris hq

Lyris HQ is a cloud-based integrated email software featuring email testing as one of the tools in the package. The product is built for enterprise scale digital marketing and have advanced delivery management console to optimize email reach and engagement.

The tool is really allows previews of emails in more than 30 different clients and cell phones, to check blacklisting of sender’s IP, and shows the results of past emails reaching the receiver’s inbox.

[Price: Not Listed]

Now Read:
9 Tricks to Design The Perfect HTML Newsletter






10 Unique Playing Card Designs You&#8217;d Rather Keep than Play

hongkiat.com - wo, 15/04/2015 - 17:01

According to Wikipedia playing cards gave been around for over 1,100 years now. They have changed considerably since then. Different variations of decks have been created, yet what we recognize as a “regular deck of cards” hasn’t changed much for a while. At least that’s what you might think! There are quite a few companies that have created special decks which range from odd to beautiful to useful.

If you collect cards (or want to start) or are just looking for one perfect deck, perhaps you’ll find what you need in this list.

1. Contraband

This is an exquisitely designed deck with a distinct personality. It really looks like something you expect to find in a sinking pirate ship – the term booty definitely seems to apply.

The deck costs $7.95, a very modest sum. You can also grab the moody book lamp that goes along with it for $149.95. This seems a bit steep but each book lamp is hand-crafted and contains a secret stash that fits two Contraband decks.

The design of the website is also something to behold, it makes the deck look so much better – seeing it in a fitting environment. Grab Contraband now, it’s a work of art, not just a set of cards. [Get them here]

10. Prohibition

I drink next to no alcohol but I really love how well made and unique the Prohibition set is, which consists of six decks, all a nod to different alcoholic drinks. Absinthe, Disparos Tequila, Rebellion Rum, Moonshine, White Wolf and 52Proof Whiskey make up the set in a beautiful slim box.

Each deck has a beautiful and unique design. It’s hard to decide on a favorite.

You can grab the lot for $125 at ellusionist.com which isn’t a bad deal considering you are getting 6 decks and a beautiful wood box! [Get it here]

3. Mystery Box

If you’ve seen the Mystery Box Ted Talk from J.J. Abrams you know what this deck is all about. Mr. Abrams loves secrets and his company, Bad Robot, wanted to instill this in a pack of cards. The cards themselves look great and at $9.95 a piece they are a steal.

What I really love through is The Lockbox you can grab for $149.95. This is a bit pricey but you’ve got to love the 100 year old reclaimed wood, iron hardware, letterpress note, wax seal – all the works!

$1 per deck is donated to 826 National, a non-profit dedicated to promoting creative writing in schools and workshops around the USA, giving you another reason to grab this great looking deck. [Get them here]

4. Deck Out: Fashion Playing Cards

To tell you the truth, I’m the last person you would call a fashion guru, but that doesn’t stop me from appreciating this wonderful deck by Connie Lim. The Fashion Playing Cards Deck is the accumulation of her card designs which she made one-by-one as far as I am aware.

Grab the set for $54.99 from the Connie Lim Webshop. If you like the designs take a look at her prints, you can grab all the cards there as well! [Get them here]

5. Charity: Water

This deck is less flashy than the ones we’ve seen so far but 100% of all proceeds from purchases go toward a great cause: bringing clean and safe drinking water to people in developing nations. If you’re a collector and you spend hundreds of dollars on cards, why not spend an extra $5 per deck and contribute to this effort?

While not as flashy, I do love the minimalism and the clarity of the water tank logo throughout the design. Buy a deck now and help people to better drinking water! [Get them here]

6. Bruce Lee Playing Cards

When I started writing up this article I didn’t think Bruce Lee would come up! I had a look at this deck out of pure fascination and it turned out to be pretty good. The cards come in the same colors as the legend’s famous yellow jumpsuit, which can be a little bit off-putting, you know, for card playing. That said, I like the overall design and feel of this deck, especially the way quotes are positioned like a black belt – the perfect homage.

This deck will set you back $14.95. [Get it here]

7. AVES Playing Cards – LUX Edition

A striking combination a fine art and birds, this is a beautifully designed deck by Russian artist Karina Eibatova. The back looks a bit trippy when fanned out but I love birds and I think the aces are one of the best designed ones I’ve seen so far, especially for clubs. You can grab a deck on Lux Playing Cards for $12. [Get it here]

8. MailChimp

Want to geek out by buying playing cards that are made in collaboration with a web app? If geek is your thing the MailChimp playing cards are a great choice. I expected them to be a marketing gimmick with MailChimp’s logo all over the place but I was pleasantly surprised. The only actual logo I found was on the gold closing tape which looks fantastic by the way.

You can get a black or a red pack for $9.95 each, or you can get a 12-pack brick for $125. I’m not sure I’d want a 12-pack of Mailchimp cards but a black one is welcome in my collection.

Buy them and you’ll also be supporting the Fugees Academy which is a member of the Fugees Family – a non-profit dedicated to working with child survivors of war. [Get them here] 9. The Design Deck

I’m a big fan of design (since I can’t really do it myself) so this deck strikes a chord with me. You get to play cards and learn about typefaces, fonts, art-deco and other design concepts. Each of the 52 cards teaches you something great. It’s a shame they don’t have a second color deck with more. Perhaps this should be the way to teach design! You can buy a deck from Art Of Play for $20. [Get them here]

10. Dan And Dave Variety Box (Winter Ed.)

Dan And Dave offer a number of playing cards, one of my favorites is the variety box, specifically the Winter Edition which draws inspiration from the fall/winter colors of Yosemite. For $149.95 you get 12 decks which means you get them for $12.50 each, plus the awesome looking box of course. [Get them here]

Bonus: 5 More Card Designs

Here are more playing card designs that deserve a mention.

Bacon

You didn’t really think there would be any bacon involved right? I don’t even want to go into it. Why buy this for $12 from Art Of Play? Because bacon. Convinced? [Get it here]

The Goonies

Do you love the movie The Goonies? This is your lucky day because some smart person on Kickstarter thought this was the World wanted and it seems the World has proved him right. The deck is available from Albino Dragon for $14.99. I’m not saying I’ll go right ahead and buy one but the art is impeccable, well worth the $15 if you’re a fan! [Get it here]

A Deck Of Playing Cards By Pedale Design

Another successful Kickstarter project (funded to 2300%), this deck is for those who like pixel perfect design. They have a couple of decks one black, the other red, on their Misc Goods Co website going for $15 a piece. [Get them here]

Distant Early Warning Card Deck

Designed by Eric McLuhan, award-winning media and communications expert (and son of media theorist and academic, Marshall McLuhan), the deck is available for CAD65 on Eric McLuhan’s products page. You can take a look at the full deck here. [Get them here]

IMAGE: McLuhan Galaxy Glitch

Glitch started its life on Kickstarter and was successfully founded. It’s a unique set which basically adds glitches to classically designed cards. The concept is awesome although it may be a bit annoying to play with if you have OCD. Find it on Amazon for around $14. [Get them here]

Now Read:
30 Beautiful & Creative Invitation Card Designs






20 Free Brochure PSDs You Can Download

hongkiat.com - wo, 15/04/2015 - 15:01

A while ago we showcased two awesome collections of brochure designs for your inspiration, which was popularly received IMAGE: the readers. So, today we decided to share with you free brochure PSDs you can customize and use.

A well-designed brochure can be a great marketing tool and help your brand be noticed. Designing a brochure to show products related to real estate, music, medicine, technology, business or any other kind of business is simple with the designs I put together here.

IMAGE: Graphic Burger IMAGE: Wassim Awadallah. IMAGE: Wassim Awadallah. IMAGE: Pixeden. IMAGE: Free PSD Files. IMAGE: Ahmed Hasan Baky. IMAGE: Free PSD Files. IMAGE: Freepik. IMAGE: designbolts. IMAGE: macrochromatic. IMAGE: Hendra Maulia. IMAGE: Original Mockups. IMAGE: Webstroy80. IMAGE: blugraphi. IMAGE: Pixeden. IMAGE: Blugraphic. IMAGE: wegraphics. IMAGE: Rafi IMAGE: Theme Raid. IMAGE: Johannes Mutter. Now Read:
50 Beautiful Printed Brochure Designs






20 WordPress Starter Themes For Developers

hongkiat.com - di, 14/04/2015 - 17:01

For those of you who want to make a WordPress theme, but do not know where to start, starter WordPress Themes are a practical way to get started. What you need to make the starter theme work is to tweak it and style it into the great theme it has the potential to be.

Many of these starter themes come with a bunch of features to help you in your cause, for instance, a number of them come with Sass, Foundation and Grunt. If you are an advanced user, some of these clean and minimalistic themes may be what you are looking for. Here are more than a dozen useful Starter Themes that can help you develop a better theme.

WP-Flex

Wp-Flex is a blank responsive theme for WordPress. The code is written based on the WordPress Codex and theme review guidelines.

Sage

Sage is a starter theme developed by Roots, with an advanced workflow to write styles in LESS/SASS, check JavaScript error, synchronized browser testing and other tasks which are automatically run by Gulp. It uses Theme wrapper, Root’s way to keep you use clean code in building theme.

Underscores

Underscores is built by most developers of Automattic. Underscores comes with simplicity and best practices for theming, minimal functions and styles — a great for starting point for developing your own theme.

Bones

Bones adopts the mobile-first approach and is responsive. SASS files are included to kickstart the styling on your theme project. It comes with preloaded Custom Post Types and Custom Dashboard Functions for you to customize the admin area on the dashboard.

JointsWP

JointsWP is a blank theme made with Foundation 5, giving you basic styling to develop a WordPress theme further. Integrated with Foundation, JointsWP is responsive, and includes JavaScript features such as off-canvas navigation. For styling, JointsWP has included a SASS file to make it easier to expand the styles.

WordPress Starter Theme

WordPress Starter Theme lets you build custom themes with SASS, AutoPrefixr, and HTML5 Boilerplate an includes modern web technologies such as Grunt for running tasks, and Browser Syncs for auto reloading the project across browsers.

Blank WordPress Bower Grunt

Blank WordPress Bower Grunt is armed with Grunt and Bower and is ready to use with SASS Compass for styling the design. This theme also includes the format-{POST TYPE} files that separate into each format types, such as format-gallery.php, format-quote.php and so on.

_tk

_tk is integrated seamlessly with Bootstrap to give you a good-looking minimal starter theme. It also comes with wp-bootstrap-navwalker, a custom WordPress nav walker class that fully works with Bootstrap. The _tk code is based on Underscores.

Compass

Compass is a boilerplate for your custom WordPress theme with advanced features, built using modern tools like Grunt, Sass, Bourbon and Hybrid Core.

Big Blank Theme

Big Blank Theme provides you a blank responsive starter theme, with minimal styling and semantic HTML5. Its basic stylings include common elements such as headings, image alignments, comments and forms.

WordPress Bootstrap

WordPress Bootstrap come with features such as Multi-Lingual in 7 diferent language, page templates (e.g. homepage, standard page with sidebar, full width page, etc.), theme options panel, shortcodes, and sidebars.

Cutlass

Root-based Cutlass is a WordPress starter theme which gives you the advantages of Blade, a template engine that allow you write code more quicker. Cutlass includes Bootstrap 3 and Font Awesome by default and Gulp.

Cornerstone

Cornerstone integrates the Zurb Foundation Responsive Framework on providing WordPress starter theme. It’s lightweight, responsive and SEO friendly.

DevDmBootstrap3

Armed by Bootstrap 3, DevDmBootstrap3 comes with clean codes and you can make child themes that run on top of this theme. This Cleanblog theme is a great example.

BST

Fully integrated with Bootstrap 3, BST comes with features such as WordPress menu position with Bootstrap navbar, Bootstrap pagination for blog index and category pages, and also a Visual editor stylesheet, which allows you to get the same visual style on the text-editor and on the frontend interface.

FoundationPress

FoundationPress uses Foundation 5 for base styling and let you turn this starter theme into an advanced responsive theme. FoundationPress contains essentials needed to help you start build WordPress themes on any design. It includes SASS files to make styling easier, and Grunt.

Quark

Quark is made based on Underscores and TwentyTwelve. You will find the built-in Options Framework theme, which makes it easier to add cutom options on your theme.

Html5blank

Html5blank is a minimalist theme with simple styling, suitable for development. Html5blank has plenty of awesome productivity and core features to make development easier.

Sprig

Spig comes with the Twig template engine, allowing you to write less code and develop quickly. Sprig includes Bootstrap and Foundation, Gulp and Bower and useful functions from Underscores and Roots to make your development more easier.

WP Nebula

WP Nebula is shipped with build-in custom functionality like shortcodes, styles, and functions. The codes are easy to understand as well as to customize, plus comments on the codes ease faster development.








7 SEO Tip to Give Your Local Business a Boost

hongkiat.com - di, 14/04/2015 - 15:01

Search Engine Optimization is an intricate, methodical and important element of any online business, or any corporate entity for that matter. Without SEO, your website will just be buried below the rotting pile of search engine results and you’ll get almost zero conversions. With the help of a few local SEO tips though, your unfortunate situation can turn around.

As a business, you know that the opinion of your customers or clients about you matters. Not only can you forge trust between one another, but you also can open doors to future clients to like you.

When users google local services, they will see a map of the nearest outlets to get the services they searched for. These results are often separated from Google’s main organic results.

So if your company has received good reviews, even if your website’s not yet optimized for search engines, you will yield top results, and often, positive conversions. Let’s look at a few tips that will help you boost your business’s online presence locally.

1. Get Winning Reviews

So you want a good cup of coffee but since you’re new to the city, you don’t know any coffee shops close to you. Naturally, you google for coffee shops around your location. If there are a lot nearby, how do you choose? It will be impossible to try all coffee shops to decide which you will like most.

The better alternative will of course be to read what other people think of the coffee shops in your area, and pick the ones who got the most positive feedback.

As a business owner, what does this mean to you?

Well, the opinion of your clients are important for you, especially if they are positive. Reviews on sites such as Yelp.com play a major role in local SEO and establishing trust in potential customers. How do you get these reviews? By asking your customers to leave a review if they liked your service or product. The more, the better. Remember that anyone can leave a review; it doesn’t have to be a customer.

You should also know that whenever Google finds a website that mentions your business name and your address, it counts as an "upvote" or a backlink to you. This will help you because it increases your trust rating from Google.

Bing

Microsoft’s search engine Bing is also one factor to consider. Currently, Bing offers services for places of business (which is similar to Google Maps/Places). Using this service you can:

  • Add a local business. Bing allows small and local businesses to be listed on their maps. If you are a small store, this is recommended for you.
  • Add businesses with multiple locations. This category is effective for smaller chains like franchises. Being able to connect your branches through the Bing Places will help your customers from different parts of the locality to connect to you, and, if you’re lucky, you might even get valuable conversions. You can add up to 10,000 locations using this option.
  • Put businesses without a physical store on the map. This option is perfect for businesses that take the service to where their customers are e.g. plumbers, home-tutors, and other home-services.
Yahoo

Yahoo also allows you to list your business in more than 50 directories. You can include offers and extra details to encourage clickthrough. It charges $30 a month to be listed.

2. Start your own Blog

If you want to dominate the local market offline and online, you need to offer up a lot of information, like a local phone number, local address, email address, and maybe live chat if really needed. But the real magic happens when you have a blog for your business.

Having a blog helps you to target the right keywords as it establishes trust on your website. Use blog posts to establish trust from search engines and people. You can do this by creating blog posts targeted towards your relevant keywords even if their monthly search volumes are not high. You can also do simple techniques like including the city name to your domain (or subdomain).

This makes your website more identifiable with the local audience and will make it easier for you to get local reviews. This way, you can reach a small number or relevant audience with less competition. And over time, you’ll find out that these pages rank well.

One more thing that you need to remember about starting your own blog is not to be selfish — you should also blog about your niche in general. You can write several articles about yourself but you can also review your competitors, be fair in evaluating. And never, ever bash them. Average Internet users are now intelligent enough to notice that your blog is talking about no one else but you. And that shouldn’t be the case.

3. Use the Right Keywords

If you scour the Internet for SEO tips, they will always mention that keywords are what makes your website rank where they are supposed to be. You have to pick the right keywords to rank for because no matter what you do, if you don’t have any reference for the searcher to find you, you will not be found.

If your target audience is within Los Angeles, it is only intuitive to add “Los Angeles” in your keyphrase. For example, if you are selling perfume in Los Angeles, then you should aggressively blog about your niche in an organic manner. However, despite your wanting to target keywords easily, you shouldn’t start writing articles that are poor in quality.

Common bad practices include:

  • Keyword stuffing
  • Article Spinning
  • Plagiarism
  • Using keywords for unrelated articles

These practices don’t benefit your rankings but actually jeopardizes them. If you publish content that is irrelevant or unoriginal, chances are, you will lose the trust of your audience and you get down-voted on search engines.

However, the best thing to do about this is to write without thinking of search engines. Your keywords should be fluidly inserted into the articles so that when the user reads it, it still makes sense.

  • Put the keyword on the meta tags of your code (if you’re running on WordPress, then the Yoast plugin will make your job easier).
  • Make sure that your keyword appears at least once in the title (h1 or h2 tags), in the body and in your images’ alt tags. Remember not to stuff your keywords. It worked in previous search engine algorithms but not in modern ones.
  • Remember that you should have at least 300 words for your pages to be ranked.
4. Create Locally-Specific Pages

Having a target location matters in search engine results. While you would want to boost your presence for the world to see you, your efforts (and efficiency) will have value if you target where your target business is.

If you are a used car dealer business located in New York City, you would want New Yorkers to find you more than anyone else in the world. If you want your customers to find you, you have to drill down your targeted location to a specific place.

This method is also advisable because you are able to limit your competition in the rankings. If you become successful in your SEO efforts, you will reach the upper results without spending too much time or effort.

Take our used car dealer example. If you will search for "Used Cars", you will probably get some results that are more difficult to compete with:

In the above example, the top results for the keyword used cars have page ranks of 8. That means it will be harder for you to rank your keywords.

But if you use "Used cars in New York", you will be getting results for pages with PR4, a number that will be easier to compete with.

The rule of thumb on this is that your pages should have at least 400 words stating your business and how it pertains to your location. Also, follow the tips in point #3.

5. Get Backlinks from Local Blogs

One of the recurring tips you will find on how to promote a blog is by guest posting. But under the context of local SEO, simply guest posting will not cut it. Suppose you have a brick-and-mortar business in Los Angeles and you want to get your name out there, but your website isn’t receiving any traffic at all. What is the best way to kickstart everything? I’m glad we’re on the same page: ask local bloggers to write a story/review about your business or submit a guest post to them.

For example, if you have a tech-related business in Los Angeles that’s just weeks old, or relatively new to the online scene, the best way to find tech bloggers is to, well, Google them. Search engines are designed to behave the same way as how humans search for information. This means that Google, Bing or Yahoo will show on their first pages results that they think are trustworthy. These pages, most probably, contain the good content you are looking for.

And how do they determine trust? Do search engines know what trust is?

Well, yes and no. In reality, search engines are just a bunch of algorithms designed to behave like humans. So they need the opinions of humans to determine trustworthiness. This means that if a website is in the top result of your search query, it is probably the content most linked to. If you get a lot of websites link to you, you will be able to rank higher.

But not all links are made equal; some links are more valuable than others. This means that not all websites who link to you are good, and you can cheat search engines by creating bogus pages that link to your content. That doesn’t happen, at least not anymore.

To rank higher, you must be trusted by websites that are trustworthy themselves. A backlink from a PR1 website is way different than the ones given by a PR8. The latter will probably be, in a wider sense, useless because search engines don’t trust them yet.

But how do you get links from higher PR websites? Publish interesting and sharable content and make your local connections link to you

6. Join Local Social Media Groups

This is an intuitive but highly underrated technique. Social media presence and engagement affects SEO and people’s trust. For example, let’s say you are a pet grooming company based in Tokyo. What do you think would be the best way to reach pet lovers in Tokyo? The answer is pretty simple: you start looking for groups on Facebook dedicated to pet lovers located in Tokyo.

If you live in a city, chances are high that there are dedicated Facebook and Twitter groups for your city. Think of this, as of 2014, there are over 1.35 billion Facebook users all over the world. It’s impossible to not be able to find a group for your niche.

It makes sense to join local social media groups because they are closer to you and could possibly give you conversions. This way, you can also start building your community, which could lead to returning customers.Here’s what you can do:

  • Join their community, ask insightful questions, provide useful answers, and give valuable resources.
  • Interact with members regularly, as much as possible, comment on their concerns and questions.
  • Regularly share your articles on their pages (just take note of the rules, because some pages don’t allow link sharing in their groups)
  • Try and share other articles from related niches too (so that you won’t be seen as someone who is just concerned about promoting your own service).
7. Slither Your Way Into Credible News Websites

Now that you have connected to trusted bloggers and local social media groups, it’s time to connect with credible news websites.

If you can have a local media cover your business, you ultimately enjoy long-term and positive results on your search results and conversions. Once you get coverage from trusted and reliable media companies, you will be able to invite more business to your company.

But what’s the difference between blogs and news agencies?

Bloggers are usually made up of individual to a small group of people providing relevant information about a certain niche. They commonly talk about guides, experience-based articles and lists. On the other hand, news websites are commonly made up of a larger crowd, reporting about real-time events.

To put it simply: blogs can be informative, opinionated, or promotional while news websites deal mostly with announcements.

What you can do for your website is to start building relationships with the local media by encouraging them to try your products or services. In the media world, it is commonly known as X-Deals. For example, if you are a bakery, you can send your best bread to a local news reporter and email him to ask if he could review it for you.

You can also send emails to reporters about an event you will be hosting (that will, of course be with charitable aims) and ask them to cover it for you. This will serve as an advertisement for your company. Some companies do this often because they know that most people trust the news, and if they are reported in there, chances are, the audience will see them as someone trustworthy as well.

Conclusion

Optimizing a website is difficult. You’ll have to use up a lot of time, effort, money and, most importantly, patience to make your page go number one. If your pages don’t appear in the first page after a day, don’t fret. It’s part of a process. Just keep going. Good luck!

Now Read:
Basic SEO Tips For Images You Should Know






What You Don&#8217;t Know About Calculating Percentage Margins in CSS

hongkiat.com - ma, 13/04/2015 - 15:01

Most web designers think they know CSS pretty well. After all, there isn’t that much to it — a few selector types, a few dozen properties, and some cascading rules that you barely need to remember since they boil down to common sense. But when you get down to the nitty-gritty level, there are plenty of obscure details that few designers truly understand.

When I examined the results of a free CSS test I’ve offered online for the past six months, I discovered one question that almost no one got right. Of the thousands of people who took the test, fewer than 14% got it right.

The question boils down to this: How Do You Calculate Percentage Margins?

The Question

Say your site has a container div, and inside that, a content div:

Now, let’s give that content div a top margin:

.content { margin-top: 10%; }

Okay, so it’s 10% … but 10% of what? That’s the question that only 13.8% of people can answer correctly. And keep in mind: these people have access to Google!

What I love about this question is that it seems like the answer should be obvious. So much so, that I suspect most people just take a guess (and guess wrong). But maybe it doesn’t seem obvious to you. I mean, if you really use your imagination, there are many ways the browser could conceivably calculate a margin like this.

So how about if I narrow it down for you since the question in the test is actually multiple choice. Here are your options:

  • 10% of the content div’s height
  • 10% of the container div’s height
  • 10% of the content div’s width
  • 10% of the container div’s width

Remember, only 13.8% of people can pick the right answer from this list. That’s way worse than chance!

Look closely at the answers; you’ll see there are really only two things you need to know:

Container or Content?

First, is the size of the margin based on the size of the content div itself, or on the size of the container div?

Now this isn’t a gimme, but you can probably trust your instincts. If I set a div to be 50% of the width of its container, and then I want its left and right margins to fill the rest of the space, I’d naturally set them to 25% each (so the percentages add up to 100%). For that to work, percentage margins must be based on the dimensions of the container.

Sure enough, two thirds of people who take the test get this part of the answer right.

Width or Height?

Second, is margin-top’s size based on the width or the height of that element?

If you’ve been paying attention, you’re probably on your guard already. For so few people to pick the right answer, this has got to be a trick question, right?

And yet, I bet you can barely believe that the answer isn’t height. Well, it isn’t.

Yes, we’re talking about a top margin here. Yes, the size of that margin is a vertical measurement. Yes, if a block is 50% of the height of its container, and you gave it a top margin of 25%, you’d expect that to be 25% of the height of the container. And you’d be wrong.

Don’t feel bad if you thought it had to be height. Nearly 80% of people who take the test agree with you:

It Makes Sense… No, Really!

Still don’t believe it? Here’s a quote from the W3C CSS spec:

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

The same goes for top and bottom padding, in case you were wondering. As for borders, it’s illegal to specify their width as a percentage.

So at this point, you’re probably thinking the creators of CSS are either bonkers, or they just made a really dumb mistake. But I’m here to tell you, there are two good reasons to base vertical margins on the width of the containing block:

Horizontal and Vertical Consistency

There is, of course, a shorthand property that lets you specify the margin for all four sides of a block:

margin: 10%;

This expands to:

margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%;

Now, if you wrote either of the above, you’d probably expect the margins on all four sides of the block to be of equal size, wouldn’t you? But if margin-left and margin-right were based on the width of the container, and margin-top and margin-bottom were based on its height, then they’d usually be different!

Avoiding Circular Dependency

CSS lays out content in blocks stacked vertically down the page, so the width of a block is usually dictated entirely by the width of its parent. In other words, you can calculate the width of a block without worrying about what’s inside that block.

The height of a block is a different matter. Usually, the height depends on the combined height of its contents. Change the height of the content, and you change the height of the block. See the problem?

To get the height of the content, you need to know the top and bottom margins that are applied to it. And if those margins depend on the height of the parent block, you’re in trouble, because you can’t calculate one without knowing the other!

Basing vertical margins on the width of the container breaks that circular dependency, and makes it possible to lay out the page.

Ace the Class

So there you have it: the hardest question on the test, and now you can answer it. Want to know how you’d do on the rest of the test? Try it yourself. I promise, most of the questions are much easier than this one.

Meanwhile, I’m in search of a new toughest question! What detail of CSS do you think nobody knows?

Editor’s note: This is written for Hongkiat.com by Kevin Yank. Kevin has written about the web since 1999, with books on PHP, CSS, and JavaScript to his name. He’s also hosted podcasts, spoken at conferences, and produced video training, all about the Web. He now leads the development team at Sit the Test, a web application for making and taking online tests.

More on Hongkiat: Now Read:
10 Hidden CSS3 Properties You Should Know






Top 15 Apps From The OpenShift Marketplace

hongkiat.com - ma, 13/04/2015 - 12:16

Ever heard of OpenShift? OpenShift is a simplified cloud platform for developers to build and deploy applications effortlessly to the Cloud. It gives free usage of three small gears and 1 GB of database storage and it comes with support for a wide variety of programming languages, databases and platforms. On top of that, you get custom domain support, SSH access to the application’s console and more for free.

The platform comes with its own app store, aptly named the OpenShift Marketplace. Here, developers can try to find solutions for their OpenShift-hosted applications. We’re looking at third-party apps for productivity, for managing and speeding up databases, email delivery services, messaging queues, improving performance and more. It’s an attempt to widen the OpenShift Platform-as-a-Service (PaaS) offering, and bridge the gap between service providers and application developers.

Let’s have a look on the remarkable third-party solutions from OpenShift Marketplace that enables you to build better products for your customers on the Red Hat’s cloud platform.

SendGrid

SendGrid is a simplified email delivery service. Its cloud-based email delivery infrastructure relieves you of the cost and difficulty of managing an email system. It’s a reliable and scalable solution with real-time analytics and flexible APIs for easily assessing email campaigns and building custom features.

MongoLab

MongoLab is the cloud service of MongoDB, the most popular NoSQL database. It’s a fully-managed Database-as-a-Service (DBaaS) for mission-critical applications. It features highly-available MongoDB databases along with other features such as automated backups, web-based tools, all-time monitoring, excellent expert support, etc.

New Relic

New Relic is a performance-monitoring solution for web and mobile applications. It’s a cloud-based analytics and monitoring software with the highest levels of compliance and integrity. It empowers developers and business leaders to understand their users’ true experience and helps in delivering value to the customers by creating great applications.

Memcached Cloud

Memcached Cloud is a fully-managed cloud instance of Memcached with high availability and fast storage engine. It’s a memory-caching system in the Cloud to speed-up dynamic database-driven websites and web applications. It can prove to be a performance booster if your application makes large numbers of database requests, by caching frequently used data in the memory.

ElephantSQL

ElephantSQL is a cloud version of PostgreSQL — the most advanced open-source database. It’s a configuration-free instance of PostgreSQL that’s hosted in Amazon EC2 for high performance, availability and reliability. It comes with many more features such as automated regular backups, high security, and support for powerful extensions such as HStore, Crypto, and many more.

CloudAMQP

CloudAMQP is a RabbitMQ-as-a-service offering. It provides a common platform for your applications to send and receive messages, and thus allows your applications and services to connect to each other and your users, and work as decoupled application modules. It can effectively handle messages and notifications streaming, and proves to be an excellent backend for real-time applications.

Searchly Elasticsearch

Searchly Elasticsearch brings a cloud-hosted, scalable and flexible search engine for your application. Its REST JSON APIs allow easy integration with many languages and frameworks. Its Kibana dashboard provides configuration controls and search analytics; which helps to understand user needs, improve content and manage the search engine’s performance.

ClearDB MySQL Database

ClearDB offers globally distributed and secure cloud instances of MySQL database. It’s highly available, stable and hardened MySQL platform for those who cannot risk their applications going offline. Its multi-node structure provides data access even if a node (or more) fails or goes offline. Moreover, this offering even includes battle-tested security like SSL encryption and client certificates.

Redis Cloud

Redis Cloud is a cloud offering to host and run your Redis dataset. It’s a highly available, scalable and stable service with infinite scalability, which means your dataset can grow to any size. It schedules backups every one second, and even offers an option to backup to Amazon S3. Moreover, it’s fully automated and allows the use of many database connections for high performance.

IronWorker

IronWorker is a scalable task queue or worker cloud service that can handle anything and everything you send it. It can do all the background-processing tasks for your real-time production-scale applications. You can queue tasks from your app, schedule jobs or use webhooks to send tasks. It works with various languages and binary executables, and handles security by using SSL connections and running tasks in sandboxes.

IronMQ

IronMQ is a message queue service that offers message persistence, redundancy and security. It runs on highly available cloud infrastructures, and supports multiple queuing patterns and string messages for maximum flexibility. It provides a rich dashboard that shows all the active queues and messages statistics. It comes with support for multiple interfaces and client libraries for various languages.

PubNub

PubNub is a cloud infrastructure to build real-time scalable applications. It offers simple APIs with SDKs for almost all popular mobile, browser, desktop and server platforms. It provides key features for real-time apps like user presence, push notifications, persistent data streams, etc. It features analytics with real-time maps and graphs, audience analysis and even audience simulation for testing purposes.

Load Impact

Load Impact is a load-testing service. It provides automated, on-demand performance testing of your real-time applications with realistic simulated testers. Its features include scheduled load tests, session recording, server monitoring, mobile client and network emulation, etc. It can simulate more than a million concurrent users from multiple geo-locations to test the load-tolerance of your application.

DreamFactory

DreamFactory is an open source REST API platform. It automatically generates APIs for backend data sources and lets your application connect to any SQL as well as NoSQL database, file storage system or external services. You can create modern applications using the provided SDK for HTML5 or native code libraries for mobile platforms.

BlazeMeter

BlazeMeter is a load and performance testing solution. Its auto-scripting feature can relieve you of writing scripts for tests. It’s even compatible with Apache JMeter and its scripting capabilities. It simulates tests using realistic visitor behavior from multiple geographic locations. You can watch real-time reports or compare multiple reports using intuitive graphs from the test management system.

Wrap Up

These applications and services can help you to build a better application, one on the OpenShift platform that’s more scalable, reliable, handles data better, can handle heavy background processing, pass messages and supports decoupled app modules, and is gone through heavy testing before put into production. Moreover, you can start free.








9 Indie Marketplaces to Sell your Designs

hongkiat.com - vr, 10/04/2015 - 15:01

These days, it’s easier than ever to share your creations with the world. There are numerous companies out there who make it their mission to help you sell digital products of any kind, including music, videos, ebooks and designs to your audience. Most of them will make sure your premium products will get as many product views as possible, but in return they’ll take a big piece of your revenue pie.

Today we’re going to talk about marketplaces where designers can sell the design assets to their fellow designers. The first two places that come to your mind when you hear this is probably Envato and Creative Market. But what about the marketplaces that don’t take away your power to control the pricing of your products and allow you to take most of your profits?

Here are 9 such non-exclusive marketplaces that may help you reach new audiences.

1. Sellfy

Sellfy is one of those places that started out as one of the online services to sell digital products and expanded by opening their own digital goods marketplace in November. While they do accept digital goods in a variety of categories, including eBooks, audio, video and software, their biggest category is web design. One of the most compelling benefits of Sellfy is that you can offer "social discounts" to customers who share your products via social networks. They take a 5% fee per sale.

2. Iconfinder

Iconfinder started out as an icon aggregator and search engine, but has recently morphed into an icon marketplace. With more than 400,000 icons in stock, Iconfinder is the place for designers, developers and other creative professionals to find premium icons for their next creative project. The payments received are pooled together and distributed on a monthly basis, hence there will be a month’s delay before you can receive your money. Minimum cash-out is USD100.

3. Picfair

Picfair is an image marketplace where photographers can sell their photos, choose their own price and keep all copyright. What separates this marketplace from others is the fact that there is only one single license that is used for every photo. Picfair also has an advanced search by tag or topic functionality, which makes it easier for buyers to find a suitable image for their needs. Picture info includes image resolution, the date it was taken, and the model of the camera used. PicFair takes 20% commission on top of your sales price plus a small payment processing fee.

4. Luvly

Luvly.co is another non-exclusive marketplace for graphic design assets, with a style that can be described as cute, girly or feminine. The strong collection of beautiful digital designs includes vectors, fonts, clipart, wordpress themes and blogger templates. One aspect that distinguishes this marketplace from others is its DIY and scrapbook bias. Fees range from 20-40%, depending on sales volume.

5. Fantero

Fantero.com is a virtual content marketplace within the design and freelance communities. It’s collection of over 2 million digital items by over 100,000 users. The marketplace originated as a place for photographers to sell their stock photos, but over time expanded its specialization into web design templates, sound loops & effects, music, flash and video files as well as 3D models and scripts. A minimum of USD50 is required to cash out and fees range from 25-50%, depending on sales volume.

6. MotionElements

MotionElements is the marketplace where you can sell your 2d/3d animation, stock video clips, video backgrounds and other stock motion elements. Because of the MotionElements’ exclusive dedication to the stock motion elements, they are able to provide highly relevant search function. The categorical search helps with queries such as background, front view, keyed top layer or camera view. They charge a 30-50% fee based on exclusivity of the elements. Payments roll out once a month, on the 15th.

7. MOJO Marketplace

MOJO marketplace offers premium products to build, brand and grow your website. This includes themes, plugins as well as graphics and logos. They offer a wide variety of website graphics suitable for both website or print projects. Designers can upload their logo designs, business cards, vector graphics, font sets and stock graphics to MOJO marketplace. The marketplace has partenerd with a lot of hosting companies that provide premium distribution opportunities for the products in their marketplace. They take a 50% cut from each sale.

8. Canva

Canva.com is an simple graphic design software that allows everyone to create their own designs for Web or print. They rely heavily on pre-made design templates, including infographics, banners, flyers, photo collages, album covers and social media graphics among many others. Designers can then release their designs for use. Payment is fixed at $1 per one-time-use license. Professional designers are welcome to submit their own layouts for Canva users to use in their designs. Canva’s royalty rate stands at 35% per sale.

9. Shapeways

Shapeways is a 3D printing marketplace and 3D printing service. Designers are invited to upload their 3D printable files and Shapeways will take care of the rest. This includes printing out the item, shipping it to the buyer and settling any disputes in case there are any problems with the product. There is a 3.5% transaction fee on top of your markup.

[Editor’s note: The Shapeways site is down at the moment. The team is working to sort out some technical issues.]

Editor’s note: This is written for Hongkiat.com by George Vauvenargues. George is a writer and designer with over 4 years of experience in both fields. He is now working on Soccerstand, an online tool and mobile app that helps people to stay on top of live sports results.

Now Read:
20 Websites To Sell Your EBook






Pagina's