Fresh Resources for Web Designers and Developers — July 2013 |
- Fresh Resources for Web Designers and Developers — July 2013
- How To Remove Unnecessary Modules in jQuery
- Supercharge Your Online Calendar With 5 Handy Plugins
- Keep Track Of Your Projects with Postpone
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 TemplateApple 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 FontsForecast 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 IpsumBored 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. TopcoatRecently 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. SwiperSwiper 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. ScreensizesScreensiz.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 JSFlipclock 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. MmenuSince 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. PurePure 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 DataWeb 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. Recommended Reading: Creating a Volume Controller with jQuery UI Slider First thing firstFirst, 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 HomebrewSo, 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 GitAfter the Homebrew installation completed, run the following command to install Git. brew install git Install Node.jsRun the following line to install Node.js brew install node Install GruntLastly, we need to install Grunt. Run this command. npm install -g grunt-cli Build jQueryCurrently, jQuery allows the following modules to be excluded.
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 Removing ModulesLet’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 ThoughtjQuery 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. 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. Recommended Reading: How To Connect Evernote With Google Calendar & Gmail 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. 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. 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. 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’. 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. 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. Read also: Productivity Tips for Freelance Web Designers Try It OutAfter 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 HierarchyCreating 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 PostponingPostpone 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 CategorizingThe 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 IntegrationPostpone 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. PricingThe 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 DevelopmentThere 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. ConclusionAs 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. |
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment