All posts tagged “&#38”

10 Lightweight Alternatives To Bootstrap & Foundation

Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming – there are a lot to choose from. Perhaps, you want to go with popular choices like Bootstrap or Foundation, but if your website is going to be a fairly simple one, you won’t be needing most of the building blocks and materials included in the default package.

The good news is that there are a handful of alternatives that are much leaner than Bootstrap or Foundation. Most of these frameworks ship with just the right amount of styles and components to help you get started, while allowing you to be able to extend them in the direction you want for your project.

Here are 10 lightweight alternatives to Bootstrap and Foundation that you should use for building smaller-scale websites.

More on Hongkiat.com:

1. Skeleton

Skeleton has finally gotten a facelift. It’s a total revamp from the ground up, and yet it is still as light as it used to be. The new Skeleton grid system now adopts mobile-first philosphy, which ensures that the layout takes center stage regardless of how small the device screen is.

All components that were included in the earlier version – buttons, forms and input elements – are still present but basic typography styles are now set in rem unit.

2. CardinalCSS

CardinalCSS is a CSS framework built with a focus on performance, readability and most importantly maintainability. CardinalCSS adopts some modern approaches such as mobile-first for shaping up the grid; and CSS Box Model that allows you to easily determine element width and height.

CardinalCSS also comes with a handful of helper classes that allow you to quickly apply styles upon an element, for example, the drop-cap which applies the drop-cap effect for the first character in the paragraph.

3. ConciseCSS

ConciseCSS is a CSS framework – without the bloat. It is a lean framework built on top of Sass, LESS, and Stylus which paves its golden path to CSS maintainability. But, if you prefer plain simple vanilla CSS, you can have that as well.

Similarly, ConciseCSS also comes with base styles for essential elements such as the headings, paragraphs, tables, forms, and a set of helpers class to create button UI.

4. PowertoCSS

PowertoCSS is lightweight and a solid frontend framework. Class names that are used to build the grid and apply styles are simple and easy to remember e.g. .button. You can also add your own theme. Head over to their StarterKit to get started.

5. Furtive

Furtive is a mobile-first CSS framework built around the cutting-edge web standards like the use of Flexbox for the grid and rem unit for sizing elements (including font size). Furtive retains a small CSS footprint by not supporting older browsers (*cough* Internet Explorer) since they require some CSS hacking. Hence Furtive is a perfect framework if you are designing a website for the future.

6. BassCSS

BassCSS offers a lightweight set of base element styles, utilities, layout and color styles, in modular form for buildilng a responsive web application. The SCSS files are included to customize the style easily. You can play with typography, white space, breakpoints, and UI elements.

7. Mueller

Mueller is a modular responsive grid system built on top of Sass and Compass. With Mueller, you can build the grid either by adding classes straight to the HTML elements, or if you prefer your HTML elements to be neat and clean, using the grid() function. Mueller grid can be used in tandem with the Masonry Javascript library to create a Pinterest-like layout.

8. Tuktuk

Tuktuk is a very unique name for a framework. Compared to Bootstrap or Foundation, Tuktuk is much lighter as it only comes with just the proper amount of components to build a presentable website including for the grid system, basic styling for typography, tables, and a couple of UI like navbar and modals.

9. Base

Base is built on top of LESS and Sass, and it includes only the most essential of components to build websites: the grid and the basic styling of HTML elements. Base does not come with Javascript components, yet it provides great browser compatibility so much so that it works even with IE7.

10. Toast

The last of our list is Toast. Through the SCSS stylesheet is included in the package, Toast allows you to easily configure the grid class names, the gutter, and even the column-base. For example, if you want the grid to be a 9-base column instead of 12, you can do that. Toast is a minimal CSS framework with very flexible configurations catered to meet your requirements.





hongkiat.com

Where To Find New & Good Writers (Best 5)

So, you’re looking for a writer. Specifically, you’re looking for someone who can lure eyeballs to your website with words, the same way the Pied Piper can lure children away from Hamelin with music. That’s great! Even with the advent of robot journalists, there’s nothing quite like giving the human touch to virtual copy.

For that reason, you don’t want a writer who writes like she or he just wants to get the whole thing over with. You want someone who genuinely cares about the “what”, the “how”, and the “why” of your message.

And, quite frankly, you won’t find too many of these people on sites like Odesk, Elance, and Guru. (Even if you do find them, it’s pretty likely that their skills are worth much, much more than $ 5/hr.) You’ll make better use of your time searching for writers in places like:

Websites for Writers

Unless you’re a writer yourself, you probably don’t go anywhere near these sites. After all, what use would you have for blog posts like “How to Smash Writer’s Block to Bits” or “How to Schedule Your Writing Time?

But if you don’t at least take a look at the bylines behind the aforementioned posts, you’ll be missing out on some mad writing skills. Writers usually lurk on sites like the ones on The Write Life’s 100 Best Websites for Writers for their daily dose of writing tips. Occasionally, they write a guest post or two for those sites, so they can add a handful of pieces to their portfolio and show the world that “writer” isn’t just a meaningless badge they brandish around for the heck of it.

Comments Sections

Aside from (guest) posting on writers’ websites, writers also let loose in these websites’ comments sections. Unlike most, these comments sections tend to be well-moderated, so there’s little to none of the usual vitriol you find in those places.

Also, the writers have links back to their own websites – either through their username or an in-comment link formatted as “(username) recently posted (blog post title) – so it won’t be difficult to check their stuff out and drop them a line.

Blogs in Your Niche

Okay, maybe wading through post after post about “how to write when you don’t feel like writing” isn’t in your wheelhouse. Maybe you want someone who talks less about writing and more about… a non-writing related thing that you want to write about. Does that make sense?

In that case, Google “(your niche) + blog”, and see if you can find any good leads from there. If you’re already following a blog in your niche (which you should do, by the way!), you may already have a writer who stands out to you in some way. Feel free to let them know that you have work available for them, because chances are they’ll be happy about the offer!

Referrals

Then again, maybe the writer you want isn’t available. That can be quite a letdown, not to mention a testament to that writer’s skill (why else would she or he be in demand?). What you can do is ask that writer if she or he knows someone else she or he can send your way.

By the way, it’s a good sign if a writer can – or will – refer someone to you. It means (1) the writer does everything she or he can to help clients, even indirectly; (2) the writer makes the time and effort to connect with others, which is a basic but valuable marketing skill; and (3) you made a good enough impression as a client to warrant referrals to people that the writer likes and trusts.

Social Media

LinkedIn isn’t the only place to find writers (although it’s certainly one of the best places). Savvy writers also set up Facebook pages, Twitter accounts, and even Google+ pages to let people know about their services.

If you type “freelance writer” in the search bars provided by these social networking sites, you’re bound to get a good lead or two. You can also comb through Facebook groups, filter Twitter hashtags for writers, or make a public post about your need for a writer.

Where Else?

“Where there’s written content, there are writers.” Keep that in mind while you search, and you won’t give up so easily if you’ve been online for hours and you still haven’t found “the one”. Writers have a knack for hanging around in the most unlikely places (because, hey, we’re a weird bunch), so keep your eyes peeled. Just like magic, you never know when or where these people might appear!

Finding the writer you want in the above-mentioned places can take more effort than you’re used to. But when you do manage to find that writer, your efforts will be nothing compared to what the writer can bring to your table: greater website traffic, stronger customer relationships, and, above all, a major boost in your self-confidence as an entrepreneur.

Do you have any stories to share about good writers, and how you found them? Share away in the comments section!





hongkiat.com

5 Tools To Help Audit & Optimize Your CSS Codes

Once your website starts to grow, so will your code. As your code expands, CSS may suddenly become hard to maintain, and you may end up overwriting one CSS rule with another. This complicates things and you will probably end up with plenty of bugs.

If this is happening to you, it’s time for you to audit your site’s CSS. Auditing your CSS will allow you to identify portions of your CSS that is not optimized. You can also reduce the stylesheet filesize by eliminating lines of code that is slowing down your site’s performance.

Here are 5 good tools to help you audit and optimize CSS.

1. Type-o-matic

Type-o-matic is a Firebug plugin to analyze fonts that are being used in a website. This plugin gives a visual report in a table, bearing font properties such as the font family, the size, weight, color, and also the number of times the font is used in the web page. Through the report table, you can easily optimize the font use, remove what is unnecessary, or combine styles that are way too similar.

Type-o-matic

2. CSS Lint

CSS Lint is a linting tool that analyzes the CSS syntax based on specific parameters that address for performance, accessibility, and compatibility of your CSS. You would be surprised with the results, expect a lot of warnings in your CSS. However, these errors will eventually help you fix the CSS syntax, and make it more efficient. Additionally, you will also be a better CSS writer.

CSS Lint

3. CSS ColorGuard

CSS ColorGuard is a relatively new tool. It’s built as a Node module and it runs across all platforms: Windows, OS X, and Linux. CSS ColorGuard is a command line tool that will notify you if you are using similar colors in your stylesheet; e.g. #f3f3f3 is pretty close to #f4f4f4, so you might want to consider merging the two. CSS ColorGuard is configurable, you can set the similarity threshold as well as set the colors you want the tool to ignore.

4. CSS Dig

CSS Dig is a Python script and works locally on your computer. CSS Dig will run a thorough examination in your CSS. It will read and combine properties e.g. all background color declarations will go underneath the background section. That way you can easily make decisions based on the report when trying to standardize your CSS syntax e.g. you may find color across styles with the following color declaration.

 color: #ccc; color: #cccccc; color: #CCC; color: #CCCCCC; 

These color declarations do the same thing. You might as well go with the #ccc or with the capital #CCC as the standard. CSS Dig can expose this redundancy for other CSS properties too, and you will be able to make your code be more consistent.

CSS Dig

5. Dust-Me

Dust-Me is an add-on for Firefox and Opera that will show unused selectors in your stylesheet. It will grab all the stylesheets and selectors that are found in your website and find which selectors you are actually using in the web page. This will be shown in a report, you can then press the Clean button and it will clean up those unused selectors and save it to a new CSS file.

You can download this tools from Firefox Addons page or the developer’s site, and if you are Opera fans you can get it from the Opera Extensions Gallery page.





hongkiat.com

20 Minimalistic & Professional Business Card Designs

Even in this day and age, business cards are important. They can serve many purposes: Reminders, a way to leave notes, portfolio showcases, a way to offer discounts – the possibilities are endless. Following in the footsteps of Nancy Young’s great article about business card designs, I thought I’d show you the results of my search while preparing my own business card.

Here, I’ve put together a selection of 20 minimal business cards. Whether they focus on graphics or typography, these business cards will hopefully give you an idea of what you want to achieve with your own business cards.

Squared Eye By Able Design

Visual Jams By James Graves

Letterpress Business Card By Brad O’Sullivan

Seiichi O’s Personal Busines Card By Heterobrain

Design & Direction By Adam Vella

Michael James By Joey Rabbitt

Miner & Miner By Mike Kasperski

Mid Century Modern Business Cards By Seabornpress

Brown Kraft Business Cards From Rock Design

SOE By Therese Ottem

Monkey Square By Muhammad Ali Effendy

Pop Grub By Hype & Slippers

Hot Popsicle By Rachel Kalagher

Self Promotion By Ross Sweetmore

Sifter Logo & Letterpress Business Cards By Graham Smith

Troupe By Flag&Mountains

Personal Identity By Paolo Pettigiani

Personal Business Card by Solveiga Pakštaitė

Wellness Reform School By Maria Larios

Triad By Macrochromatic





hongkiat.com

8 Android Apps To Boost Internet Speeds (& Help You Survive The Holidays)

The holidays are coming and you know what this means — everyone who came home is helping to hog the home Wi-Fi. It is also the time of the year when we are treated with plenty of online content which can zap your data plan faster than you can say "What’s for dinner?".

Despite the availability of 3G and 4G cellular communication technologies which allow us to have access to the Internet wherever we are, it doesn’t hurt to get a bit of a boost when it comes to getting a faster Internet connection.

Here are 8 Android apps that can help boost speeds to tolerable levels, and help you survive the long holiday gatherings. Note that some of them only work with rooted devices.

Internet Booster & Optimizer

Internet Booster & Optimizer is an Android app thatcomes with a series of commands that prioritizes the browser among the other applications that are using the Internet. This means that one can dig out more speed from the available Internet connection. It usuallypauses the secondary apps that are using Internet, cleans RAM & cache memory and flushes the DNS to make sure that most of the Internet speed is utilized by browser only. [Get it here]

Faster Internet 2X

Faster Internet 2X provides a convenient way to get more speed from 3G and 4G cellular networks. The app is designed using special programming scripts that will boost the Internet speed to approximately twice of what’s available. This provides a better Internet user experience.It works fine with both rooted and non-rooted Android phones. The app displays ads that can be disabled. [Get it here]

Internet Speed Booster

Internet Speed Booster isan easy-to-use app with a sleek and minimal design. It uses a unique algorithm that can increase the Internet Speed of your Android device with a single tap of your finger. Internet Speed Booster app is designed in a way that has it working impeccably with rooted as well as non-rooted Android devices. [Get it here]

Internet Booster (Root)

Internet Booster (Root) uses a different method for getting more out of the available Internet connection. It basicallychanges the configurations of system ROM to increase the Internet speed to 40% to 70% higher than before. Internet Booster (Root) only works with Rooted Android Devices which means one shouldallow the Super User privileges to run this application properly. [Get it here]

Free Internet Speed Booster

Free Internet Speed Booster is another Android app which could possibly help you get rid of the slow Internet speed. It increases the Internet speed from 40% to 80% more than usual byimproving the Ping latency, halting the unnecessary background apps and managing a balance between parallel connections. Free Internet Speed Booster does not require a rooted Android device. [Get it here]

Internet Speed Booster 3G/4G

Internet Speed Booster 3G/4G appenables a user to load websites and stream videos at a speed which is equivalent to 3G/4G Internet speed. It may increase the Internet speed from 30% to 40%. This depends on the strength of the signal available to the Android phone at that time. This app works for both rooted and non-rooted Android phones. [Get it here]

Internet Speed Master

Internet Speed Master is a nice app with around 1 million installs from around the globe. The app adjusts the TCP/IP settings by modifying the system files to improve the Internet speed of one’s Android device. It is advised to make a backup of your device’s content before trying this app. It isdesigned for almost all types of ROM and can be used for all Android devices. [Get it here]

3G Speed Booster

3G Speed Booster is a small sized app that helps you get more speed from your 3G. There are some background apps that consume Internet bandwidth excessively, 3G Speed Booster scans all the background apps that are using Internet and disables them to give twice the Internet speed to your Android device. This app works efficiently with 3G networks only. [Get it here]





hongkiat.com

40+ Freebies & Goodies For Web Designers

Complete UIs and elements, textures and brushes for Photoshop, HTML templates, background designs, icons, fonts and tools make our lives as designers and developers easier, saving us the time we would otherwise be spending on creating them.

Fortunately, around the world, there are many creators willing to share their work for free allowing the rest of us to use them. Here is the third collection of freebies and goodies available for web designers. If you would like to check out our earlier collections, follow the links:

Should you find that these freebies have helped you in one way or another, do consider donating to these creators or supporting them in other forms of appreciation for all their hard work.

PSDs & Templates

Flat Infobox Layered PSD

Flat infobox layered psd

Colorful Business Card in PSD Format by al rayhan

Colorful business card in psd format

Tinyone: PSD One Page Template by Tommy Ngo

Tinyone: psd one page template

LinkedIn Redesign GUI Kit PSD by Pontus Wellgraf

Linkedin redesign gui kit psd

Random UI Elements in PSD by Tyler Gross

Random ui elements in psd

Bootstrap Style Homepage PSD Template

Bootstrap style homepage psd template

Flatter: A Free PSD GUI, HTML & Bootstrap Template by Tranquilobock

Flatter: a free psd gui, html & bootstrap template

Free Sable Kit 2 in PSD, EPS and AI

Free sable kit 2 in psd, eps and ai

ANTARKTIDA Free Sports PSD Template Vitaliy Kudelevskiy

Antarktida free sports psd template

Medical PSD Flat Theme

Medical psd flat theme

Free Flat UI PSD Kit

Free flat ui psd kit

Strict Portfolio PSD Template

Strict portfolio psd template

Fonts

Big John – Slim Joe Free Font by Ion Lucin

Big john - slim joe free font

Moka Stylish Outline Typeface by Liz Withers

Moka stylish outline typeface

Aqua Grotesque Typeface by Laura Pol

Aqua grotesque elegant typeface

Azedo Bold and Light Typeface by Pedro Azedo

Azedo bold and light typeface

Jaapokki Free Modern Font by Mikko Nuuttila

Jaapokki free modern font

FRINCO: Free Fancy Font by Ryan Pyae

Frinco: free fancy font

Cosmo Path Free Outline Typeface by filiz sahin

Cosmo path free outline typeface

Ribbon OpenType Display Face by Dan Gneiding

Ribbon opentype display face

PIROU Free Stylish Font by Quentin Grébeude

Pirou free stylish font

Icons

30 Vector Icons for IOS (Pay with a Tweet)

Vector icons for ios

12 Vector Abstract Flower Line Icons

Vector abstract flower line icons

Gamecenter Icons Pack in PSD by Alexey Anatolievich

Gamecenter icons pack in psd

SVG Icons: Ready to Use SVG Icons

Svg icons: ready to use svg icons

Pure CSS Flat Social Icons Code Snippet by Steven Roberts

Pure css flat social icons code snippet

Stackicons: Multipurpose Icon Fonts by Parker Bennett

Stackicons: multipurpose icon fonts

100 Touch Gestures Icons in PSD, AI, EPS, PNG and SVG by Jeff Portaro

100 touch gestures icons in psd, ai, eps, png and svg

Web Design Icon Set in PSD, PNG and AI by Dimitrios Pantazis 

Web design icon set in psd, png and ai

Mockups

9 Free Business Card and Tablet Mockups by Tomasz Mazurczak

9 free business card and tablet mockups

Nexus 6 PSD MockUp by Litvin Vladislav

Nexus 6 psd mockup

Business Card Mockup Volume 5

Business card mockup volume 5

Free IPhone 6 Photorealistic Mockups

Free iphone 6 photorealistic mockups

Others

ToIcon: Icon Search Tool

Toicon: icon search tool

Mailchimp Email Design Guide

Mailchimp email design guide

Pencil Project: An Open-Source GUI Prototyping Tool

Pencil project: gui prototyping tool

Dribbble App Material Design for Sketch by Soumya Ranjan Bishi

Dribbble app material design for sketch

UI Kit Inspired by Android L by Vitaly Chernega

Ui kit inspired by android l

25 Free Watercolour Circle Textures in JPG & PNG by Chris Spooner

25 free watercolour circle textures in jpg & png

8 High Resolution Texture Mix Pack by Gabor Monori

8 high resolution texture mix pack

1000 Combinations of Flat Vector Robots

1000 combinations of flat vector robots

7 High-resolution Polygon Backgrounds

7 high-resolution polygon backgrounds

Photoshop Text Effects Version 1

Photoshop text effects version 1

Brush Set for Photoshop by Matt Heath

Brush set for photoshop

Editor’s note: This post is written by Juan Sarmiento for Hongkiat.com. Juan is a designer and developer, founder of iconShock.com, DesignShock.com, ByPeople.com and TemplateShock.com





hongkiat.com

10 Simple & Smart CSS Snippets

CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use.

If you want to wrap long text, autoadjust the width of your table columns, or create a simple loading state without the use of Gifs, we have the snippets that will deliver, and more.

1. Vertical Align Anything

If you work with CSS, then this will bug you: how do I align text or an element vertically of the container? Now, with the use of CSS3 Transforms, we can address this problem more elegantly, like this:

 .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

Using this technique, everything — from a single line of text, a series of paragraphs, or a box — will align vertically. As far as browser support is concerned, CSS3 Transform works in Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.

2. Stretch an Element To Full Window Height

In certain scenarios, you might want to stretch an element to the full window height. Basic element resizing will only resize up to the container size so to make an element span the height of the entire window height, we need to span the top-most element: html and body.

 html, body { height: 100%; }

Then apply 100% height to any element, like so:

 div { height: 100%; }

3. Applying Different Styles Based on File Format

Sometimes you can have several links that you want to make look different from others, in order to make it easier to know where the link is going. This snippet below will add an icon before the link text and use different icons or images for different kinds of sources, which in this example is an external link.

 a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$  =".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; }

Here’s what it looks like.

4. Cross-Browser Image Grayscale

Grayscale can deliver a deeper tone to your website making it look more classy and sometimes minimalistic. Here, we will be adding a grayscale filter to an image using SVG. Here’s what we do to apply grayscale:

 <svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> 

And to deliver this cross-browser, we use the filter property this way:

 img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ }

5. Animating A Gradient Background

One of the most enticing feature in CSS is the ability to add animation effect. You can animate background color, opacity, size, but unfortuantely not for Gradient Color. Currently, you can’t animate the gradient background however this snippet may be of some help. It moves the background postion to make it look as if it is animating.

 button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; }

Here’s a demo to show you what it does.

6. CSS Table Column Autowidth

Tables are a pain especially when it comes to adjusting the widths of columns. However, there is a shortcut you can use. Add white-space: nowrap in the td element to easily correct the text wrapping.

 td { white-space: nowrap; } 

Check out the demo to compare the result.

7. Showing Box Shadow Only on One or Two Sides

If you want to have box shadows, try this trick which can give you box shadows on either side of a box. To make this, first define a box with a specific width and height. Give it a shadow using :after pseudo element and play around to get the right positioning. This is the code to make a bottom-only shadow:

 .box-shadow { background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; }

This is the demo:

8. Wrapping Long Text Context

If you ever come across a word that is longer than the container itself, this trick will be helpful to you. By default, the text will fill horizontally regardless of the width of the container for example:

With simple CSS code you can make the text adjust the width of the container.

 pre { white-space: pre-line; word-wrap: break-word; }

This is what it looks like now:

9. Making the Blurry Text

Want to turn text blurry? What we can do is make the color transparent,t hen add text-shadow like this.

 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

And voila, you got yourself some blurry text.

10. Animating Ellipsis Using CSS Animation

These snippets will help you make an animation called ellipsis, useful for making simple loading states instead of using a gif image.

 .loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "26"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } }

Lets see the demo.

Do play with the snippets and experiment with what more you can do with it.





hongkiat.com

10 Skype Tips & Tricks Everyone Should Know

Since it was founded in 2003, Skype has become a regular form of communication for most people out there. Millions of people use Skype for holding conversations via text messaging, voice calls and video calls at no cost at all. You can even call mobile phones and landline numbers with just a small little fee.

Despite the recent advent of Google Hangouts, Skype is still popular among people for voice and video calling. To make your Skype journey more of a breeze, we’ve put together 10 interesting tips and tricks related to Skype. Who knows maybe you’ll discover more of your own?

1. Transfer Your Skype Account Contacts

You can easily backup all of the contacts in one Skype account to be transferred into another. To do so, head to the main Skype window, click on “Contacts”, click on “Advanced” and finally click on “Backup Contacts to File”. It will generate a .vcf file which you can save on your computer system.

Now sign into the second Skype account where you want to upload all these contacts into. Once you are signed in, click on “Contacts”, click on “Advanced” and finally click on “Restore Contacts from File” which is exactly located below “Backup Contacts to File”.

2. Re-edit Your Last Message

Suppose you have sent a message which contains a mistake and you want to edit that message and resend it again? You can do this simply by pressing the Up Arrow Key on your keyboard. The last message that you’ve sent earlier will appear. Just make the changes you want and resend the edited message.

3. Make Calls Directly From Your Contact List

You can make calls to Skype contacts immediately by double clicking on them directly from Skype Contact List. To do so, head to the main Skype window, click on “Tools” followed by “Options”. Then, go to “General Settings” and tick the check box “When I double-click on a contact start a call”.

However, this will restrict you from opening the IM Window directly by double clicking on a contact.

4. Hide the Moving Pencil

When you are chatting on Skype with someone, you can see a moving pencil when the other person is typing or deleting something. Of course, this function also works both ways. If you rather not have them be privy to whether you are typing (or not), you can actually turn this option off.

To hide the typing indicator, head to the main Skype window, click on “Tools”, then “Options”. Go to “IM & SMS” and click on “IM Settings” followed by “Show Advanced Options”. Finally, tick the check box “Show when I am typing”.

5. Clear Your Chat History & Define The Time Frame For Storing It

You can clear all of your chat history on Skype and you can also define the time frame for storing the chat history. To clear your chat history, head to the main Skype window, click on “Tools” followed by “Options” then “IM & SMS”. From there, proceed to “IM Settings”and then “Show Advanced Options” before finally clicking on the “Clear History” button. It is also in “Show Advanced Options” that you can select the time frame for storing your history from the drop down menu.

Be careful, once you click on “Clear History” then you will lose all your chat messages that have already taken place in previous conversations with the contacts in your Skype account.

6. Get Keyword Notifications

You can also choose to get notifications only when particular words are mentioned by the other person in a personal IM window. To set up the keyword notifications, start by opening up the personal IM window of a contact you want to set up keyword notification for. Click on the “Conversation” menu then “Notification Settings” and finally click on the radio button “Notify me only if these words are mentioned”.

Write down all the words that you want to be notified of in the text box provided. However, these settings will disable the notifications for all other messages apart from specified keywords, so there is a chance that you may miss out on an important message.

7. 25+ Hidden Emoticons & Smileys

There’s actually a collection of emoticons and smileys that are not visible in the emoticons set for Skype but you can still use them if you know their shortcodes. The keywords (left to right) are written for generating smileys (left to right). Each keyword is encapsulated within a () as well.

Below is just a brief list of the hidden emoticons and smileys. If you want the full list, take a look here :

  • Poolparty – (poolparty)
  • Talking – (talk)
  • Headbang – (headbang)
  • Drunk – (drunk)
  • Toivo – (toivo)
  • Bug – (bug)
  • Broken heart – (u)
  • Mail – (e) (m)
  • Skype – (skype)
  • Smoking – (smoking) / (smoke) (ci)

8. Pause Animated Emoticons

If you don’t like the animated emoticons and just want to pause them so any animated emoticon in your IM window will appear as a still emoticon without any movement. To pause the animated emoticons, head to the main Skype window, click on “Tools”, click on “Options”, click on “IM & SMS”, select “IM appearance” and finally uncheck the “Show animated emoticons” checkbox.

9. Enable Keyboard Shortcuts (Hotkeys)

You can enable hotkeys to use keyboard shortcuts for frequently used functions. There are default keyboard shortcuts for a few functions, which you can change as per your preference.

To enable keyboard shortcuts, head to the main Skype window, click on “Tools”, click on “Options”, click on “Advanced”, select “Hotkeys” and finally click on the “Enable keyboard shortcuts” checkbox.

10. Set Up Your Caller ID

If you make Skype calls to either landlines or mobile numbers then you might want others to see your original number whenever you call them rather than an unknown number that will most likely appear.

To set up your Caller ID, go to the main window of Skype, click on the “Skype” menu and finally click on the “Account” button. It will open up a webpage in your default web browser where you’ll get more information related to calls. Click on the “Caller ID” button and on next page select “Country/Region” and “Phone number”. Now all you need to do is click on “Verify Number” and you’re set.

Recommended post – 10 WhatsApp Tips »





hongkiat.com

Creative Package Designs For Bottles & Jars You Have To See

The goal of any package design is to be unique and to differentiate itself from competitors. A bottle or jar can be somewhat of a white canvas for creative package designers. It’s a space for both art and communication with clients which can be used to tell the story of a brand. There’s a lot of ways this can be done, whether it’s through the typography or the color of the brand.

Today I’m going to showcase 30 creative package designs featuring bottles and jars that are not only unique but tell a story. Here you’ll see these vessels packed with all sorts of different items ranging from wine to salsa. Scroll down and take a look for yourself.

Le Chat by Isabela Rodrigues

Paradise by Eszter Laki

GOOD DAY MILK PACKAGING by not available design

SIROP D’ÉRABLE DU QUÉBEC by HAMIE T. ROBITAILLE

Kräftig Saft by Isabela Rodrigues Studio

Raw by Lauren Nicole Foot

Hovelsrud Jam & Juice by Gøril Torske and Nina Helland Sortland

Délices de Michèle – Brand Identity & Packagings by Chez Valois, Robin Kurtz and Michael Mason

Gia Nhien Fruit Juice by iBom Design and BINRAINBOW

Roots & Bulbs by Robot Food

The Roots Family by Beatrice Menis

Barclay’s (packaging) by No Entry Design

Juicebox Jugos Vivos

Epleslang by Dinamo Design and Ida Ekroll

Juice Sunday

Monsieur Moustache by Studio Chapeaux

Birch by Andy Clark

Spices & Jams by Masha Barsukova

Geleta jam package design / 2013 by Dori Novotny

Lolea

Jam Bottle Design For Waitrose by Turner Duckworth

The Jam | Packaging by Jessica Y. Wen

Jilly Jam packaging by Amanda Goddard

Koel Fresh by Dot Kite Lab

Nubes De Yogurt by Regina Puig

Ugly Fruit – Student Work by Mirim Seo

Wotton Brewery by Confederation Studio

Angry Man Salsa by Foundry Co.

Eerst Hulp Van Schulp by PROUDdesign

Happy Moose Juice





hongkiat.com

5 Creative & Unique Ways People Document Their Travels

Documenting your travels is not a new concept. It is a way to remember your travels and the memories you associate with the places that you visited. Most of us would take tons of photos. Some would keep a travel journal or a travel blog. Others would rather video the trip and even turn it into a mini movie.

But surely that’s not all there is to it. What if you want to document your travels with a little bit more flair than just posing with a famous landmark in the background? What if you want to include your significant other with you but you don’t want to do it the conventional way? Maybe all you need is a litte inspiration. Take a look at these 5 couples who document their travels creatively by going down the road less traveled.

1. Feet First

We never get to see the faces of British photographer Tom Robinson and his girlfriend, Verity. Just their feet.

It all started in 2005 when the couple were sitting on Brighton Beach, UK. Tom thought that a picture with their feet pointing out to the sea would look nice. It became a photo series from there as the pair went on to travel around the world together. Eventually one thing led to another with Tom and Verity tying the knot. Their photo series ‘Feet First’ is still going strong… with a couple of additional legs as their family expands.

Keep up with where this family travels next at this site.

feetfirs-england

feetfirst-australia

feetfirst-thailand

feetfirst-uk

2. Follow Me

Murad Osmann has taken over Instagram the moment his girlfriend lead him to various countries by hand.

The first picture was taken accidentally when Murad’s girlfriend Natalia Zakharova became annoyed at his constant photo-taking when holidaying in Barcelona, Spain at 2011. To stop him, she grabbed him by his hand to pull him forward. Murad didn’t stop and that photo went on to inspire his ongoing photo series ‘Follow Me’.

If you’re wondering how it worked out for them, just take a look at the picture below.

followme-proposal

followme-cathedral

followme-london

followme-rome

3. Lens Between Us

This is perfect for couples who are both photographers like Peter Sedlacik and Zuzu Galova.

Somewhere around 2013, the pair wondered how they can capture each other during their travels. They eventually came up with the idea to take each other’s photo, giving the impression that the other is always the object of their attention. It’s a fascinating and sweet concept from the Slovakian couple as viewers get to see 2 different POVs. The series is made even more delightful as Peter and Zuzu make sure to shoot each other amidst unique backdrops instead of at conventional tourist stops in each country they travel to.

Peter and Zuzu are currently residing in Australia. For more of their adventures, check out their Facebook, Instagram or Tumblr.

lensbetweenus-prague

lensbetweenus-berlin

lensbetweenus-singapore

lensbetweenus-sydney

4. Lego Travellers

You might have seen this Scottish couple’s cute photos of their Lego selves on Instagram or Facebook.

Craig McCartney and Lindsey Haggerty have been traveling all over the world long before their Lego personas. It all started when Craig found his old Lego collection at his mom’s place. He then got an idea to turn 2 Lego minifigs to represent himself and Lindsey. The minifigs’ first trip was when Craig presented them to Lindsey as her birthday gift when they were at Paris, France in 2013.

Their Lego selves now come along with the couple wherever their wanderlust takes them.

legotravellers-australia

legotravellers-portugal

legotravellers-thailand

legotravellers-denmark

5. #BrinsonBanksing

Kendrick Brinson and David Walter Banks took it up to the next level by starting a hashtag movement on Instagram.

Known as #BrinsonBanksing, the photographer couple were captured kissing candidly by a friend at Las Vegas, Nevada in 2010. Kendrick and David liked the pose so much that they decided to recreate it on their own with a self-timed camera. And they did it again, and again, and again everywhere they go as a way to document their love for each other. Even after they got married in 2012.

brinsonbanksing-nevada

brinsonbanksing-mexico

brinsonbanksing-georgia

brinsonbanksing-california





hongkiat.com