G$earch

Fresh Resources for Web Designers and Developers — July 2013

Posted by Harshad

Fresh Resources for Web Designers and Developers — July 2013


Fresh Resources for Web Designers and Developers — July 2013

Posted: 01 Jul 2013 08:01 AM PDT

Ah yes, the regular monthly roundup is back. This round, we have another 10 different tools, apps and services to help designers and developers.

In this set you will find a flipclock tool that can double as a countdown timer, a handy site that lets you grab the identity of colors easily, a cheatsheet for screen size & resolutions, as well as weather font icons!

iOS 7 Icon Template

Apple has just introduced iOS7, and one of the different thing is in the icons (but I’m not referring to their new look). The new icons for iOS has different rounded corners, grids and are a little different in size too. This PSD template lets you to design icons for iOS7 precisely.

Forecast Fonts

Forecast Fonts is a set of font icon for weather. It has a complete set of weather icons for weather patterns like Sunny, Drizzle, Sunset, Snow, Thunderstorm etc. It’s a perfect fit for a weather app!

Picksum Ipsum

Bored with Lorem ipsum? Try out Picksum Ipsum, a dummy text generator tool that generates the lines from legendary Hollywood actors, Michael Caine, Clint Eastwood, Morgan Freeman (and Jim Carrey). If you are a designer as well as a movie fan, Picksum Ipsum can help you mix things up a bit.

Topcoat

Recently Adobe introduced a CSS Framework that aims for performance, called Topcoat. It is equipped with a some additional components like UI, a set of icons, and a PSD to craft your design before getting into the codes.

Swiper

Swiper is a free content/image slider that is optimized for mobile. It is responsive, and has support for touch interaction. It is a lightweight library which is only 6.5 Kb, and runs fast as it does not require a third-party library like jQuery to work.

Screensizes

Screensiz.es lists numerous size specifications for popular phones, tablets, and monitors. The dimensions shown include screen size, physical size, the pixel density etc. It’s a very useful “cheatsheet” when we are building a responsive website – worth bookmarking.

Flipclock JS

Flipclock is a jQuery plugin to build a clock with the flipping effect. You can use this library as a normal clock showing the current time, a timer that shows how much time has been passed, or a countdown timer, like those displayed in a “Coming Soon” page. The output is customizable through CSS and extendable with the provided APIs.

Mmenu

Since mobile devices have a very limited viewable area, it is common to hide the menu navigation on the side. The user simply clicks on the menu icon to reveal the navigation. Using Mmenu it is very easy to create a mobile-like menu on your website. It provides a set of options to customize the menu.

Pure

Pure is a super-tiny responsive framework that is developed by Yahoo. It is easily themable through the Skin Builder, and could be an alternative to some already popular framework like Bootstrap and Foundation.

Web Colour Data

Web Colours Data is a webapp that allows you to grab colors from other websites in a snap. Simply enter the URL and hit the “Get Color” button; the color scheme and the Hex number of the colors will be instantly generated.

    


How To Remove Unnecessary Modules in jQuery

Posted: 01 Jul 2013 06:01 AM PDT

jQuery is undoubtedly the most popular JavaScript library, (almost) every website on this planet is using it. This affects jQuery to include all the functionalities within the library to cover every instance and possibility.

However, when we work on a simple website, we might only use a few of the functions. Thus, it would be more efficient if we were able to run only that necessary function and not everything other unused function as well. As of version 1.8, jQuery allows us to do this. We are able to exclude some jQuery modules that are not necessary in your project. So, let’s see how we can do it.

First thing first

First, we need to install some tools required to do the job. These tools are Git, Grunt, and Node.js. If you running on OS X, the easiest way to install all these tools is through an OS X Package Manager called Homebrew.

Install Homebrew

So, let’s open up your Terminal and run the following command to install Homebrew. As said, Homebrew will let us install the other mentioned tools more easily.

 ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)" 

Install Git

After the Homebrew installation completed, run the following command to install Git.

 brew install git 

Install Node.js

Run the following line to install Node.js

 brew install node 

Install Grunt

Lastly, we need to install Grunt. Run this command.

 npm install -g grunt-cli 

Build jQuery

Currently, jQuery allows the following modules to be excluded.

Modules Command Description
Ajax -ajax This specifies the jQuery AJAX API that includes jQuery.ajax(). jQuery.get(), and .load() function
CSS -css This specifies the functions from jQuery CSS Category that includes .addClass(), .css(), and .hasClass().
Deprecated -deprecated This specifies the deprecated modules or functions.
Event Alias -event-alias This specifies the event functions like .click(), .focus(), and .hover().
Dimensions -dimensions This specifies the functions to set CSS dimension. Such functions include .height(), .innerHeight(), and .innerWidth().
Effects -effects This specifes the functions that set animation effects, such as .slideToggle(), .animate() and .fadeIn()
Offset -offset This specifies the functions that retrieve45 coordinates and position. Such funtions include .offset() and .position().

Before we are able to customize the jQuery, we need to clone it from the Github repo by running this command in the Terminal.

 git clone git://github.com/jquery/jquery.git 

You should then find a new folder named jquery created under your user folder. Navigate to that directory using this command.

 cd jquery 

Next, we need to install Node dependencies modules to run our project.

 npm install 

We then build our jQuery by simply running Grunt command (and hit enter)

 grunt 

It will return the following report, if the operation succeeds.

And as we can see from the report, our jQuery is saved within the dist/ folder. Our jQuery is, at this point, set with all the functionalities, thus the size is quite large, 239kb. The minified version is at 83kb.

Removing Modules

Let’s say, we want to remove the Effect modules from jQuery; we can run this command.

 grunt custom:-effects 

If we take a look back at the file size, it is now decreased to 220 kb.

To exclude multiple modules, separate each module with a comma, for example:

 grunt custom:-effects,-ajax,-deprecated 

Final Thought

jQuery can help us manipulate DOM easily, but with 200 kb more at the size, it could affect your website performance. So, by eliminating some unnecessary jQuery modules, your jQuery script will certainly run faster and more efficient. We hope that this little tip would be useful for your next project.

    


Supercharge Your Online Calendar With 5 Handy Plugins

Posted: 01 Jul 2013 03:01 AM PDT

If you work on the Web, you will depend a lot on the calender to keep track of project progress, submission deadlines and the likes. For most of us, Google Calendar is a great scheduling tool, mostly because it had been conveniently integrated with Gmail and other Google services. Best of all, it even allows the display of other calendar services like iCal and Outlook.

G-Calize

No matter which calendar you use, there are a few handy plugins and add-ons that can help you keep track of your productivity rates, particularly if you are not able to avoid procrastinating while on the job. To help you with that, we have 5 browser tools that can help you better manage your online calendar events.

Some of them work with Google Calendar, so that’s a plus, but we’re going to start with an add-on for Firefox.

1. Integrated Google Calendar

[Firefox] Installing this Mozilla Firefox gives you super quick access to view or add events to your calendar without having to go to a different browser tab or window. Once you are on any Google service, you don’t have to sign in to open up the calendar.

Integrated Google Calendar

The add-on settings also allow you to change the window’s height and width so it won’t block off your view. After adding an event and closing the window, opening it again will leave you exactly where you left off.

2. Google Calendar Chrome Extension

[Chrome] This is a Chrome extension by the Google developers themselves. Clicking on it will let you see your upcoming Google Calendar events. You can also quickly add an event by clicking on the + button and it’ll be instantly added to your Google Calendar.

Google Calendar Chrome Extension

Another feature is that you can see the time remaining until your next agenda. This can be seen on the button itself indicating ’24m’ for 24 minutes or ’12h’ for 12 hours. This feature is handy so you won’t miss out on appointmens or deadlines as you browse the Web.

3. Location Autocomplete For Google Calendar

[Chrome] Google Calendar has the option to add the location of your event. This tweak adds even more functionality to that option by giving you suggestions to places. It uses Foursquare’s venues API which has a large database, giving you a pretty accurate location suggestion.

Location Autocomplete For Google Calendar

Once the event is created, you can click on the map button to launch Google Maps on another tab. Here you can search for the exact location and directions. There are no options to configure after installation but you have to restart your browser to get it working properly.

4. G-Calize – Themes For Google Calendar

[Chrome] If you ever wanted to replace the boring plain white color of Google Calendar, you now can with G-Calize. Be creative with the colors as you can choose any HTML hex color. The settings give you lots of flexibility. You can change the font and background color for each day of the week and even the color of ‘today’.

G-Calize

If you import a calendar or a holiday calendar you can even mark it with specific colors. These settings can be accessed whenever you visit Google Calendar or clicking on the G-Calize icon. One last note: you have to use the color palette even if you know the hex color code. Try this converter to convert hex to RGB.

5. Calendar And Countdown

[Chrome] This tweak does not work with Google Calendar but is a very simple add on for someone who heavily relies on a calendar. Run the plugin to display a full fledge calendar. You can add events by right-clicking on a date.

Hovering your mouse over any date will show you the number of days left before the day of the event. You can even color code special dates or leave notes or reminders.

Calendar And Countdown

There will also be a countdown badge on the icon telling you how many days are left before your next calendar event. You can change the calendar display to quarterly calendars or the full 12 months, configure the date format, the starting day of the week, disable "days remaining" badge option or change its color.

    


Keep Track Of Your Projects with Postpone

Posted: 30 Jun 2013 10:01 PM PDT

There are tons of productivity apps out there that promise a wide variety of features. However, needs like keeping a to-do list short, sharing workspace with other users and postpone projects for later are features you crave getting in a single place.

Postpone ticks all three boxes and while it may not be targeted for a specific crowd of avid users, freelancers can benefit from it to ramp up their productivity and improve collaboration alongside this simple Web tool.

Try It Out

After signing up for your account for free, you will be directed to a simple and clean interface where you can add your tasks easily. Fun thing about this app is that you can even add tasks via voice. When you are done with the title of your task, you can add any additional details.

The Workspace Hierarchy

Creating a workspace is easy, you just have to provide the workspace box with a title and then hit the ‘Create” green box. After that you may add to your workspaces respective tasks that are initially listed in the ‘unified task box.”

It gets more exciting when you press the ‘Share” icon on the left of each workspace. The option opens a box where you can share workspace with other users for further collaboration. Just send the invitation via email address.

Embracing The Syndrome of Postponing

Postpone also gives you the option to send reminders to yourself, hence the name Postpone. The Snooze box allows you to postpone tasks by inserting a specific time like tomorrow at 8am, Tuesday, in 2 hours, etc, or else you can opt for selecting any of the predefined snooze choices, such as, this evening tomorrow, next week.

You can always to choose whether or not the system will notify you when the postponed time hits the clock, then the tasks will appear in the task box. I honestly expected a full calendar view that would make postponing more natural and convenient, plus an option to track the progress of the project.

Filtering and Categorizing

The search functionality comes in handy for filtering your tasks and the workspace you are working on with other users. You just have to press the ‘All Tasks” link and type in a keyword to search. Filter any task categorizing the users that are involved by clicking the link ‘Anyone.”

Chrome Browser Integration

Postpone comes with a chrome extension that simply displays the number of tasks that are ready to be performed. This may come in handy for alerting users about the amount of tasks available.

Pricing

The free sign-up is limited to create only 3 workspaces; however you can add more workspaces by connecting the app with Twitter, Facebook or sending a tweet about Postpone. The premium upgrade costs $9/month and comes with unlimited workspaces.

The fee might discourage users while there are much cheaper and feature-rich to-do lists managers like Wunderlist and Any.do. However, the simplicity on Postpone is one factor that will win users over.

Room for Development

There isn’t any snooze command for postponed tasks. You have to wait until it returns back to the task box or you have to create a new task and postpone again to your desired time which is a hassle.

Secondly, the light yellow display that appears at the top of the task is not an attention-grabbing design; users might miss the alert, which defeats the purpose.

Lastly, when it comes to managing complex tasks where you may need to assign tasks to multipler users, this tool leaves the users in the lurch.

Conclusion

As it was early predicted from the name of the tool, this app is more focused on postponing tasks in natural ways so that you can focus on your other priorities.

While other features are in the works including a mobile app, this tool can be a good option to help you manage your tasks and share workspaces.

    


0 comments:

Post a Comment