Four months to go before we revisit another round of new year resolutions. In the meantime, let’s see what is in store for September’s round up of fresh resources for designers and developers like you.

In this list, we got a Photoshop plugin that allows you to create a new open image format called WebP, a source for free illustrations, and another for free hi-res photos, a tool that presents your app in a device mockup without the use of Photoshop, and many other great resources.

Let’s check them out.

CSSComb

CSSComb is a tool for sorting CSS properties so that they are more organized, readable, and easy to maintain. You can set your own rules on how it should sort the properties. CSSComb supports CSS3 and CSS Pre-processor – LESS and Sass. It is available as web tool, and also plugins for several code editors like Sublime Text, TextMate, Coda, and Notepad++.

Emmet LiveStyle

Tools such as LiveReload lets us see the changes we’ve made to our CSS, on the browser instantly. Emmet LiveStyle takes this process a step further via bi-directional live editing. That means we can do Live Editing both from within the browser and the code editor without any page refresh and file saving. Watch it in action in this video: Emmet LiveStyle sneak peak.

Read Also: How To Refresh Changes On Browser With Sublime Text

WebP Photoshop Plugin

Site developers have been paying attention to high-definition image quality and its impact on website loading performance. To address this situation, Google introduced a new open image format format called WebP. Compared to PNG and JPEG, WebP can be smaller by 26-39% while still maintaining the quality of the image.

A full list of application and operating system that supports WebP image format can be found here and here.

SVGeneration

SVGeneration is a patterns generator for SVG. As we have discussed in our previous post series, SVG is one of the way to go to serve graphics for HD screens. And now with SVGeneration tool, creating a background pattern with SVG is made a lot easier. (And this is my favorite: Circle Everywhere).

MockupPhone

There are many free PSD files to present your mobile app design or prototype in a phone or tablet mockup. But, that means it requires Photoshop to use the file as it is a PSD. In the case where Photoshop is not available, you can use MockupPhone as your alternative. At the time of the writing, you can choose iPhone, iPad, Galaxy, Nexus, and Lumia mockup.

KoalaApp

KoalaApp is a GUI application for compiling LESS, Sass, Compass and CoffeeScript. Unlike Codekit (a similar application), which only runs on OS X, KoalaApp can be run on Windows, OS X and Linux.

Unsplash

Unsplash is a collection of free HD images. The collections are really fantastic, and it can really give a good impact on your design prototype look. So, if you are looking for great image Unsplash is one of the sites to go. Worth-bookmarking and checking it regularly as there will be 10 new hi-resolution photos every 10 days.

TychPanel

We see the trend in social sites where photos are displayed in a box side-by-side or top-bottom in one frame. TychPanel is an extension that allows you to do the same thing automatically in Photoshop. Even better, you can create your own layout and boxes, adjust background colors, the width and the height.

iOS7 Wireframe Kit for Illustrator

For some designers, they may choose Illustrator over Photoshop (or Fireworks) for creating an app design prototype. If you are the one, you probably need this bookmarked and saved, iOS Wireframe for Illustrator.

Story Board Illustration

Julian Burford, a designer and illustrator from Netherland shared for more than 430 illustrations in AI format that can be useful for creating sketches and storyboard. I can say that this is one of the great free stuff every designer should bookmark. Head over to his Dribbble page to download the file.

We love gadgets of every kind, be it appliances for the kitchen or electronic ones for hiking or camping trips. We have even featured wearable gadgets for you, and a few cool ones designed for your pets, just to cover everyone in the family.

While the idea of using your smartphone and health apps to monitor your workouts and vital signs are not new, did you know that there are gadgets that can work together with your smartphones to help you stay fit and healthy? In fact, we’re here to introduce about 10 of these gadgets, this time for the calorie counters and gym-goers.

These gadgets may be able to help you make the best of your workout sessions, track your health progress and have fun at the same time. All that aside, they are all built for a mind focused on health and fitness, which is top priority to come out the winner in a dog-eat-dog world.

Recommended Reading: 30 iPhone Apps To Help You Watch Your Health

Finis Neptune

In almost every sport, music can be a rather powerful motivation to run or cycle that extra mile but never to swim that extra lap, until now. Like Sportiiiis, the Finis Neptune is secured onto the user’s eyewear, in this case, swimming goggles. This device uses bone conduction audio to relay music to the user’s ears, without the need for ear buds.

The device also makes music louder and clearer when submerged underwater. It also comes with a built-in 4GB of storage space, a rechargeable battery that lasts 8 hours and an OLED screen with music controls. [$159.99]

Misfit Shine

It’s a bracelet, a pendant, and can also fit in your pocket. The Misfit Shine is an activity tracker that lets you track your movements and activities to help you achieve goals set on your iOS device. Due to its design you can strap it on an arm and dive in for a lap with no worries – it is waterproof!

Check in on your progress by just tapping the LED-lit face. It also doubles as a watch and works on coin batteries which can last for months at a time. [$119.95]

Sportiiiis

Into cycling? Checking on your stats while you cycle is not only a hassle but may also be dangeruos. Track your heart rate safely and accurately with Sportiiiis. The simple Head-Up Display (HUD) has 6 LED to indicate your heart rate. Cyclists can mount it on their sunglasses and receive their stats via voice prompts which relay your speed, heart rate, cadence and power.

Its company does sell its own line of monitors that work together with, Sportiiiis but it is also compatible with products from other manufacturers. [$149.99]

iSpO2 Pulse Oximeter

This device plugs into older iOS devices using the 30-pin connector to track and trend your blood oxygenation levels, pulse rate and Perfusion Index, particularly if you are a sportsperson. The product is not intended for medical use and is more for sports and aviation tracking.

This means that this is a great and portable tool for sports players and sports teams that travel to play. The data from the device can be exported and kept in the athlete’s history for their reference or their coach’s. [$249]

HAPIfork

Can’t really manage your portions by sheer willpower? HAPIfork is a gadget that can help you reduce your eating pace. The sensors notify you through tiny vibrations when you’re ‘speeding’. It can also track your eating duration, the amount and intervals of ‘fork servings’ per minute.

All your data can be tracked with the accompanying app and transferred with a mini USB. The ‘brain’ of the HAPIfork is hidden in the body but can be removed for safe washing. [$99]

Fitbit Aria

Here’s a high tech weighing scale ideal for weight watchers. It tells you more than just what you weigh. The Fitbit Aria can track the body fat percentage and Body Mass Index (BMI) of up to 8 users, then transfer the data wirelessly to your computer for your progress management.

The data it collects is supported and works well together with many other apps. It’ll sync to your smartphone to notify you when you have achieved a fitness goal. Earn achievement badges to share with your friends. [$129.95]

Trace

Most fitness trackers are for moderate sports enthusiasts, those who run or jog to stay fit but most of the trackers that they use may not be suitable for extreme sports junkies. The latter would need Trace, an advanced tracker for action sports like surfing, skateboarding and snowboarding.

Trace is built for action sports and meant to be mounted on the board from where it would log in the tricks you’ve landed, your speed, maximum height and sync all of the data with a smartphone app. The app is also social, allowing one to see what fellow junkies are up to with their own stunts. [$169]

Amiigo Fitness Bracelet

Amiigo tries to separate itself from the fitness bracelet competition by having the ability to track specific workouts that you perform. It’s a 2-in-1 device, one worn on your wrist and the other on your shoe to capture your upper and lower body movements.

The two-piece gadget can differentiate your movements: cycle, swim, walk, hike, play basketball, football, golf, water sports, even working with weights or cardio equipment. It syncs over Bluetooth and is open source so 3rd party developers can create apps to work with it. [$125]

Sensoria Smart Sock

Wear this smart sock and get feedback from our ankles, yes, ankles because that’s where the pressure signals to this fitness tracker are. Designed for runners, the Sensoria Smart Sock tells you how well you’ve been running and how to improve your performance over time. Even though it has signals or sensors in the sock, it’s still washable and as comfortable as the next pair of conventional socks.

The app learns from your daily movements and acts like a virtual coach, providing you tips on how fast your pace should be or how to land your feet correctly. [$119]

Umoro One

This bottle is the greatest gift you could give to a gym addict. The bottle functions like any other bottle, but with a push of a button, it can release up to 1.5 scoops of your favorite whey protein mix. It’s great for use in the gym during workouts and having that post workout drink right after without having to carry multiple bottles around.

The ‘ball’ that holds the supplement in also acts as a mixer for those harder-to-dissolve powder drinks. The bottle comes in black or white and is sold at a very reasonable price. [$25]

YouTube is a much-loved source of entertainment; some might think it’s taking over TV due to the sheer amount and types of entertainment: mini web series, tech and tutorial channels, lyric videos and covers etc. It’s no surprise that some of us can spend hours watching YouTube videos on our subscribed list while others can binge-watch recommended videos for the whole day.

However, there are minor annoyances with the viewing experience that even these YouTube tricks can’t fix. The common complaints (basically First World Problems) are like the layout being distracting, too much white space, and annoying (or awesome) advertisements that eats into your video-viewing time.

To conquer these problems, I am going to introduce to you the Tube Enhancer Plus for Firefox and YouTube Options for Google Chrome.

Recommended Reading: Useful YouTube Keyboard Shortcuts You Should Know

Awesome "Hidden" YouTube Settings

Both Tube Enhancer Plus and Youtube Options have some pretty cool features, ideal for the serial YouTuber. With them you can:

1. Remove advertisements – Both can let you skip the ads at the start of the video.

2. Enlarge player size – You can also enlarge the ‘video box’ size so that it fills up the space of your browser window for a closer and clearer view.

3. "Dim the lights" – This feature greys out the areas around the video box. This along with #2 maximizes the real estate of your large, high-resolution monitor.

4. Set default viewing quality - If changing the video quality often irks you, then worry no more, you now need not manually change it.

5. Set autoplay settings - You can also set the autoplay settings so videos won’t automatically start playing when you open multiple videos in new tabs.

More From Tube Enhancer Plus (Firefox)

Installing Tube Enhancer Plus gives you a few controls at the bottom of your browser window to download or loop the current video on top of the other features mentioned earlier.

The coolest feature about this add-on is the ability to watch a video on the Firefox Sidebar. This allows (in)effective multitasking as you can surf the Web while watching all your videos.

More From YouTube Options (Chrome)

YouTube Options for Chrome has more customizable features. You can hide elements of YouTube like the comments section, video suggestions, video description, title, header and footer from the settings or its keyboard shortcuts. This gives you a super-clean YouTube player.

Using the mouse scroll wheel while hovering the mouse cursor above the ‘video box’ lets you change the ‘video box’ size, forward/rewind the video, or change the volume level.

Certain features of YouTube Options can also be used on any embedded videos or on sites like Vimeo, Hulu and DailyMotion.

Ever want to start a blog or website, but don’t want to learn code and website-building knowledge? Many people have and lost out on their chance at building their dream blog or website for the lack of coding or the knack for design. Needly lets you build your own blog or website without needing technical knowledge for both.

All you need to do is know how to drag and drop. Needly combines the ideas and features of a bunch of different web apps and puts it into a single app. It carries the features of WordPress, Google Reader, Basecamp, Buddypress, Elgg and much more.

Recommended Reading: 9 Ideas for Building Great Websites With Less

Getting Started with Needly

One would think that the interface for Needly would be unorganized, unusable, ugly. Needly is definitely not any of those things, in fact, it has pretty advanced features and an easy-to-use and organized dashboard.

The Needly dashboard layout is organized in three different sections which brings an organized, easy and quick navigation throughout editing, creating and managing your site:

• the middle section shows your feed
• the left sidebar shows basic navigation with your profile header and links to your website creator
• on the right is the sidebar for your groups, group members, search functionality and member invitation.

Managing and Creating A Site

Pop-Up Postings

Posting articles and other media to your Needly site is a mere click on a link on the dashboard. The feed will bring up a popup that allows you to post a video, article, image, quote, link or audio file.

Uploading and Saving Media

Besides the Post to Site dialog and tool, there is a separate and handy feature that allows you to upload a wide variety of media files and other content that you can upload, save for later, schedule it, date stamp or publish on your site while using the website builder.

You also view the media content that you have posted previously or view the media that is already on your website pages.

Adding Extra Elements

Once the user starts using the website builder they will notice that it is very fast, flexible and fluid. The easy drag and drop widgets and designer makes it such a breeze to use.

Easily add widgets and elements like Google Maps, Disqus comments, Vimeo and Youtube content, Javascript and HTML scripts, Twitter widgets, not to mention individual CSS attributes throughout the drag and drop designer.

With a little imagination and trial and error, you can set up a very professional-looking website purely out of drag and drop actions.

Advantages

• Build a site without programming knowledge.
• Multiple apps in one.
• Connect using WordPress, Facebook, Twitter or Google apps.
• Create and Join Groups
• Help out with community sites.

Disadvantages

• May be slight confusion during the first time using dashboard, for beginners.
• Mediauploader is not drag and drop. Yet.
• No individual profile pages unless made manually, on your website.

Conclusion

Needly is available in a free plan, and two other monthly pricing plans which understandably gives you more in terms of storage and bandwitdth. On top of what is mentioned, Needly still has plenty of treats (e.g customizable fonts, colors, styles, templates; responsive grids; universal RSS reader) for the new site owner and it is up to you to look around and try out this new way to build a site, coding-free.