All posts tagged “Developers”

8 Free eBook For Mobile App Developers

If you are into mobile app development, you know that this is the most difficult profession as it requires you to take several things into account before you even start working on any app development. Moreover, it is a forever learning process so you need to keep yourself up to date with the latest trend and developments in the industry. Learning process will help in increasing efficiency and productivity in the long run. The process is the same whether you develop applications for desktop or mobile.

Here, we are sharing 8 free eBooks that will greatly help you with your mobile app development work and teach you lots of good things as well. These eBooks would be your prefect resource to strengthen your grip on the subject. Enjoy!

Mobile Book of Trends 2014

Developing Modern Mobile Web Apps

The App Design Handbook

Mobile Game Design book

Native vs. Web vs. Hybrid App Development

Free Android Programming – Ebook

Free ebook: Programming Windows Store Apps with HTML, CSS, and JavaScript

Learn BlackBerry 10 App Development A Cascades-Driven Approach


SmashingApps.com

10 SublimeText Packages for Frontend Developers

Sublime Text is one of the most powerful code editors with some amazing features, and it can be even more powerful by installing Plugins or Packages. These plugins add extra functionalities to Sublime Text. And today there are many plugins to fulfill almost any of your coding needs.

Finding a good extension though could be real challenging; some extensions have been completely abandoned by their developers, while others may not longer be compatible with Sublime Text 3, the latest version (at the time of this writing).

If you are a frontend developer, we have handpicked some extensions and put them together for you in this article. These are 10 Sublime Text Packages frontend developers should try out.

More on Hongkiat.com:

1. AlignTab

AlignTab is a plugin for aligning your codes. It has a “Preview Mode” which allows you to see how the alignment will be applied (given the RegEx notation) before it is actually applied. It also has the “Table Mode” will allows you to set proper alignment for tables in Markdown format, structured with pipelines: |. AlignTab is a handy extension to tidy up your code alignment and make it easier to read.

2. ColorHighlighter

ColorHighlighter is a plugin that shows selected color codes with their visual color. If you select "#fff" it will show you the color, white. ColorHighlighter supports all CSS color formats such as Hex, RGB, HSL, HSV, and include color keywords like "red", "green", etc. It also show you LESS, Sass, and Stylus variables that contains a color value. It’s a piece of plugin that will help you be more intuitive when working with colors.

3. MultiEditUtils

MultiEditUtils plugin improves the SublimeText built-in “multi-cursor” and “multi-selection” feature, saving us time for editing lengthy code lines. For example: you can merge or swap between selected lines, it also improves SublimeText “split selection” by allowing you to specify the notation to split selected lines. I think it’s a must have plugin to install for pro-coders.

4. Git Gutter

If you are working with Git, Git Gutter is a recommended Sublime Text plugin to install. GitGutter will show a flag in the gutter area, of any edits, additions, or removal you did within your code. It’s a useful code to instantly see the comparison between your code edition against your commit, branch, or the HEAD repository.

5. Modific

Modific is useful when you’re using Git or SVN in your work. Just like GitGutter, Modific will mark a change in your codes. Besides highlighting changes, you can also view or compare the difference between the current code and the last commit by pressing Ctrl + Alt + D. Other things you can do with Modific include preview the committed code for the current line as well as reverting code modifications.

6. Inc Dec Value

Inc Dec Value allows you to increase or decrease numbers simultaneously, even if they are on different lines. Besides numbers, you can also change the value of dates, and HEX colors. To use this plugin in general direct the cursor just to the right of the number, then press Alt + to increase the number or Alt + to decrease the number. You can also use your mouse wheel.

7. FileBrowser

FileBrowser offers a new way to navigate your files and folders within your project directory. When you install this plugin you can have access to your project directory in a new sidebar, and navigate through it without moving your hands away from your keyboard – like a pro-coder. As you get used to it, this plugin can gradually boost your workflow.

8. IconFont

IconFont provides snippets for many popular icon fonts such as FontAwesome, PaymentFont, Typicons and Github Octicons. It works similar to regular HTML snippets where abbreviations will be expanded tothe full-length of classes and HTML code for each icon.

9. DistractionFreeWindow

Although Sublime Text’s built-in “Free Distraction” feature lets you focus on the code or content you are typing, when you are in this mode, the minimap, sidebar, and all other tabs are hidden. Distraction-free should not mean losing access to those features. This is where DistractionFreeWindow comes in to give you more flexibility in terms of how the Distraction Free Mode should behave.

10. FilterLines

FilterLines allows you to search through the lines within your document for the given “keyword string” or “RegEx notation”. It’s a handy feature to deal with a large amounts of raw data in the form of JSON, JavaScript Array, CVS.


Image Courtesy: David Peckham





hongkiat.com

Fresh Resources for Web Developers – February 2015

After doing this for more than a year, the hardest part about writing this monthly resource pile for designers and developers is the introduction. While we’re on the subject, here’s your February 2015 recap of the best and freshest of resources for web developers like you.

In this installment, we are looking at a special search engine to find code snippets, a very resourceful reference to address issues in the Flexbox module, and development tools for better management of color, typeface and gradients.

Gradient Animator

CSS3 Gradient allows us to create imageless gradients on our website without the need for loading any images. We can even combine it with CSS3 Animation to give a more compelling effect. But if the code is too much for you, use the simpler Gradient Animator route to generate one with a nice interface.

SVG Pocket Guide

SVG Pocket Guide is compiled by Joni Trythall. It is a handy reference that will walk you through the basics of SVG (such as creating shapes and text) all the way to more advanced features (like creating gradients, clipping paths and patterns). The book comes in Markdown format and is available in English and Portuguese.

Flexbugs

Flexbox is a very promising new module in CSS3 that would totally change they way we build web layouts. However it also comes with cross-browser compatibility issues of its own. This repository, Flexbugs, is a collection of these bugs and the workarounds to address them. This is a very useful resource for anyone who lives on the bleeding edge of the Web.

Icono

It’s amazing what we can achieve with just CSS like create a fully presentable icon using just a single element. Icono is the library that does this. In this library, you will find a collection of familiar icons that are made only with a single element, and CSS. These icons will load faster and are more customizable than image-based icons.

Dillinger

Dillinger is an eye-pleasing Markdown editor. Here you can write in Markdown format, and instantly see the output on the right hand tab. For your convenience Dillinger allows you to export your work into HTML, PDF, or just in a Markdown file format once you have done. Alternatively, you can also connect it to a third-party service like Dropbox and Github where you can save your file.

HTML5Up

HTML5Up is a collection of free HTML5-based templates. You can find a handful of layouts that cater to different types of websites: business, portfolio or just a simple blog. All templates are responsive as well ensuring that the content and the website layout are enjoyable in varying screen sizes.

CSS Colours

Ever wonder what a particular color is named? CSS Colours shows the color name as well as the Hex and RGBA format for a collection of basic colors. It’s a good source to find the perfect color combination for your websites.

Emmet Re-view

Re-view is a Chrome extension that parses your website @media queries and displays your website in each of the breakpoints specified in each @media query. If you are looking for a tool that could save you a little bit of time when testing responsive websites, then this is the tool you need.

TypeGenius

If you take a look at the Google Font library, you will find a lot of fonts in varying faces, family, weight, and types. Hence choosing the right pair or combination of fonts could be a real overwhelming task. TypeGenius makes selecting font pairs simple and fast and possible for the general population.

SearchCode

As the name said, this is a search engine to look for codes or code snippets of many programming languages including JavaScript, C, PHP. This search engine will derive its result from many sources such as Github, Bitbucket, and Google Code. This is a definite must-have tool for heavy coders.





hongkiat.com

Web Developers Should Acquire Designing Skills: Answers to Why, How, And What!

When visitors come at a website, they get appealed by the way it’s designed. An aesthetically beautiful website, conveying the real business message, is a success ingredient for the website owner. That’s why web designers are thought to lay the foundation for website building. They work on providing an enhanced look and feel to the site visitors or the business prospects.

Web Developers Should Acquire Designing Skills: Answers to Why, How, And What!

With growing tough online competition, the importance of professional web designers increases many folds because they make a website shining against rivals.

Appreciating designers doesn’t mean one can ignore the web developers, the people who make a website working. Although both web developers and web designers work in close collaboration to complete a project, but the rift exists. They rule their own domains and don’t feel good to get interfered. Quit this philosophy if you want to succeed. Whether you are a web developer or a web designer, learn the other field. It will help you grow professionally and enjoy good working relationships. In this post, you will come to know the reasons, why web developers should learn web designing, how they can do that, and what should be learned.

Change The Concept Of Web Developers

As time is changing, web development is also facing modernity. Web developers solve the problems in way of smooth website working. They are not considered to work for website’s look and feel. This concept needs to be changed, and being a coder you are going to do that after reading this post.

Why Web Developers Should Learn Web Designing?

To learn web designing means to become more productive and efficient while building websites. Here are given some major reasons for web developers to learn web designing.

To become responsible

Learning web designing means becoming part of a team comprising human members, becoming responsible, and changing the typical concept of web developers.

To build websites without help

A web developer can sharpen the designing skills and can start working solely on a project. It will bring more projects and more earnings. No need to hunt for designers separately. However, this approach shouldn’t negate the significance of professional web designers.

Working on website interaction

A web developer having designing skills can work on interactivity of the website and coding at the same time.

Better teamwork

Most of the times, web developers and web designers are thought to be the rivals working on any project. Acquiring designing skills can help web developers in better understanding the designers and collaborate effectively. It also helps in better understanding each other’s perspective, leading towards extraordinary work.

Responsive website building

As evolving technology is giving birth to a large variety of devices, web developers have to build responsive websites. Learning the basics of designing helps them in creating smartphone friendly websites. Having a designer’s eye, web developers can realize how certain design elements will behave. How esthetically beautiful desktop sites can be made mobile friendly, web developers should know. Both web designers and developers can come up at elegant and prudent web solutions after brainstorming ideas.

After understanding how different design elements work, it’s easy for developers to write concise and consistent code, and modular CSS. Both these aspects are integral to create responsive websites, working smoothly on any device.

Know the design to know the users

Working for users need a clear understanding of what do they want. Web developers need to pay attention to this aspect of website building. Usually, they focus the technical details of a website, but it lets them ignore the end users, failing to reach user-friendly solution. A better understanding of web designing helps coders in coping with that problem. An earlier engagement in the web designing process enables web developers to know the roots, the designing issues, and ways to stay closer to the end users. All these things lead towards a better web solution for a business and the target audiences.

Developers can enjoy coding

For developers, what else could be the best reason to learn designing other than enjoying coding? Solid discussions among designers and developers prove productive and collaborative. Going beyond the technicalities of the project helps developers feel great and accomplished. Read books, online tutorials, attend design conferences online, meet with designers’ communities, hold discussions; that could be your learning mode. After that, start asking questions at your workstation. The more you gain knowledge the better you will feel while coding.

To enhance the designing skills

Isn’t it amazing to add few more skills to your resume, like learning about graphic designing tools? This will surely force you, as a developer, to go for enhancing your existing skill set. It will increase the chances of getting a dream job.

To enhance the esthetic sense

Web designers are known to have sharp esthetic sense. By learning the designing process, a coder can also determine the esthetic criterion of a website. Refining the visual skills is a step towards becoming aesthetically sensible, a designers’ trait.

To know the business requirements

It’s not just the business environment getting competitive; web developers also have to face tough competition. By acquiring designing skills, a coder can understand the client’s requirements and can deliver the best web solution with unrivaled look and feel. Website interactivity is another strong aspect that developers could focus if they have the designing guts.

No need to get helped out

If a developer knows how to design, he/she can work on any website without getting helped out by any other designer. Earning more without sharing is the outcome of working on any project solely.

How To Acquire The Designing Skills?

After knowing the reasons behind acquiring the designing skills, it’s time to know where to go for that purpose. Here are given some ideas and places to take help from.

Get inspired!

Browse the web and explore best web designs. Get inspiration from excellent designing work. It will ultimately improve your taste of website designing. Dribble and Best Web Gallery are the places to look for some inspirational design work.

Go through online tutorials

Thanks to the web. There are amazing websites helping fresh designing enthusiasts to acquire basic and advanced web designing skills. Few are mentioned below!

Tutsplus: The website has 18804 tutorials and 454 videos to help newbie designers learning the art. The learning categories include HTML, CSS, Photoshop, design theory, and the list goes on.

Lynda: It’s another amazing video tutorial site for fresh and experienced web designers. For coders, this website offers great help to sharpen their designing skills. It also offers web designing courses, supplemented by free video tutorials. Learn the latest web designing tips as part of a large variety of available courses in the library.

Treehouse: Learn about designing, coding, and business through more than 1000 videos. The library is equipped with tutorials about latest developments in the technology world. Earn badges for the courses you learn. These badges show the skills you acquired and are viewable by anyone online.

Start Implementing What You Learn And Get Feedback

It’s not just about acquiring the designing skills, but about implementing them. Get feedback from expert designers and end users about your work. Keep the web design simple, yet elegant with rich features. To get feedback from other experts, join online communities like.

Forrst from Zurb: It’s an online community of web designers and developers, where they share their work and get detailed feedback from experts. It helps in becoming sharp in whatever skill you have acquired.

Silverback: It offers usability testing for newbie and experienced developers and designers. For your newly gained skills, this could be a better platform to know what you have accomplished and how much improvement is needed for perfection.

Designing Concepts That Coders Need To Know

Now, come to the designing concepts and practices that a web developer should know.

  • Design is more about web personality: Developers shouldn’t consider designing as a visual part of a website, but a complete personality of a business. The very first moment a visitor enters a website and the point he/she leaves, web design supports the experience. It reveals the business objective. The site load speed, hovering and clicking, delivering new content, all these are part of the web design. As design affects the overall user experience, so every person working on the project should be a designer. If a coder knows how the end user interacts with the website, he/she is a designer.
  • Design should be user centric: Whether it’s a site or app, users should be given due consideration from the very start. A web design should be user centric. Main purpose is to help users browse the website with speed and effectiveness.
  • It’s all about details: To create a good design, a coder should pay attention to the details. What does it mean by attention to details? It means how a design can help satisfying the users or annoying them. Being a coder, you need to learn when the minute details need attention and when the bigger picture should be kept in mind.
  • Use sketches for learning: Before designing, better to sketch. It will help building a relationship between content and hierarchy. You don’t have to spend on creating sketches and it involves less time as well. You can share your ideas about website layout and user experience by drawing sketches. No mockups or coding is required to display ideas. It’s not tough to use boxes, arrows, and squiggled lines to show ideas. However, you need to express the underlying ideas of sketches in front of experts or clients.
  • Know how to use white space: What’s the importance of using white space? To let the site visitors breathe. It’s needed to process information. It’s just like breaking a paragraph into sentences. The best example of using white space perfectly is that of Apple. The company has utilized white space to highlight its products.
  • Use grids for design unity: Grids create relationship between different design objects, allow visual alignment, create vertical and horizontal rhythm and an optical balance. It’s not a CSS framework, but an important design tool that needs to be used with clear sense.
  • Emphasize the important item on a page: In design, focus a single element per page. Offer a clear hierarchy while pointing the visitors towards the direction they want.
  • Save inspirations: As you are going to design along with coding, save the things that inspire you like pictures, videos, websites, posters, etc. These will help you getting ideas when needed while dealing with a specific designing issue. Save the inspirational work in a folder.
  • Problem solving for the users: Web designing is more like solving problems for the users. Make use of features that help users during their stay at the site. While making use of colors, images, and anything else, question yourself, why you are going for some particular choice. It will help you in coming up with a solution, not just a design.
  • Concluding the discussion: Learning web designing is though not necessary for coders, but it enhances their vision of website building and helps them in earning more because they can work solely on any project. Don’t consider designing as a talent that designers have, but a skill set that you, as a coder, can acquire. Dip into the designing world and practice what you have learnt. The more you practice, the more you will shine with your work. See your career blossoming with multiple skills like designing and developing.

 

What’s your opinion about learning web designing while being a coder? Share in the comments below!

Visit us at InstantShift.com

PSD to HTML


InstantShift

15 Useful AngularJS Tools For Developers

Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with Angular on your own, you’re on the right post. We have here some tools that can streamline your development workflow.

We’re looking at 15 of the best IDEs, text editors, tools for testing & debugging, modules and development tools and apps for building with Angular. If you have your favorite tools or apps, do share them with us in the comments below.

IDE & Text Editor

In the programming world, there are two types of editors: full featured Integrated Development Environment (IDE) and lightweight text editors. Both allow for faster development workflow. The IDE and text editor we listed below are pretty good tools to speed up your Angular development. They can be easily configured for the Angular environment.

WebStorm

WebStorm is suited not just for Javascript but also HTML and CSS. It has an awesome live editor which lets you see your coding results on the browser without frequent refreshing needed. By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. For more details, read the WebStorm blog post.

Aptana

Aptana is a free open source IDE which is actually the customized version of Eclipse focusing on Javascript, HTML, CSS and other web goodies. To extend Aptana for Angular support, all you need to do is install the AngularJS Eclipse extension from the Eclipse Marketplace.

Sublime Text

One of the most popular text editors available, Sublime Text is loved by many because of its customizability to adapt to any kind of programming environment. It is also fast and has customizable code snippet support, and has many packages including the AngularJS package which allow you to work with Angular. Here is a great post by Dan Wahlin you can check out about this.

More on Sublime Text:

Testing & Debugging Tools

Testing and debugging are important parts of the development process especially in an environment like Angular. Here are some of the tools that can help you test and debug your application.

Karma

Karma is a great test runner made for Angular, but can also be used with any other Javascript framework. It supports any type of testing: unit testing, midway testing and E2E testing. Karma works by opening browsers that you list in the configuration file. It then communicates with the active browser using socket.io and asks you whether to run the test or not.

Jasmine

Jasmine is used for behavior-driven development (BDD), but you can use it for test-driven development (TDD) with a bit customization. It is usually coupled with Karma: Karma as the test runner, Jasmine as the test framework. Jasmine will automatically inspect all your Javascript classes and functions and notify you of unhandled code. The drawback is it doesn’t know which environment (browsers) the test performed, but Karma compensates for this disadvantage.

MochaJS

When compared to Jasmine, MochaJS is more flexible but Jasmine comes as an all-in-one package. With MochaJS, if you want to use spy framework, you need to set up Mocha with its appropriate library like sinon.js. And if you need assertion framework, Mocha needs to be configured with a framework like Chai.

Protractor

Protractor is probably the most powerful automated end to end (e2e) Angular testing tool. Developed by the Angular team, Protractor is built by combining some great technologies available today like NodeJS, Selenium, webDriver, Mocha, Cucumber and Jasmine.

Angular Batarang

Besides Protractor, another great tool developed by the Angular team is Angular Batarang. Batarang is a Chrome extension for debugging Angular applications. After inspecting your app, Batarang will show you the model, performance and dependency debugging results in three different tabs. You can also control the inspection, deciding whether to show the applications, bindings or scopes.

ng-inspector

ng-inspector is a browser extension supported on Chrome and Safari. Unlike Batarang which shows up in DevTools, ng-inspector prefers the side panel display instead. You can inspect and highlight DOM elements as you hover over a scope. You can also see the scope and model updated in real time.

Modules

The best place to find Angular modules is ngmodules.org. But if you need a quick overview, below is a list of some good resources we’ve collected for you.

AngularUI

AngularUI is a collection of UI components built with AngularJS. Its utility directives help you build Angular applications faster. Instead of widgets, AngularUI uses raw directives like ui-router, ui-map, ui-calendar etc. The directives you’ll probably like the most is its UI-Bootstrap which can natively create Twitter Bootstrap in Angular. Check out its clean and nice documentation page to get started.

ng-Table – Sorting and Filtering Table

If you need tables in your web application, the kind that can be sorted and filtered, then ngTable is the tool you are looking for. It also supports variable row heights and great pagination capabilities.

Restangular

With Angular, you may have a hard time working working $ resource and $ http for creating Rest API. Restangular can help make the usage of get, delete, update and post data requests easier. Some features that set Restangular apart from $ resource are HTTP method support, self-linking element, promises usage and many more. Find out more here and check out the live demo on Plunkr.

Angular Gettext

Angular-Gettext is a superb Angular module for super-easy localization. The key features are you can translate your web app as easy as adding attribute. It lets you focus on your app development and leave all translations to Angular-Gettext.

Tools & Apps

Lastly, we’re just going to leave this here. It’s a list of more tools and apps that can probably make your Angular development process easier and smoother. They work well with those who are just starting to pick up Angular.

Generator Angular

Yeoman has a code generator called Generator Angular. With this tool, you can speed up your Angular development with only couples of terminal command. It can automatically generate development server, unit and framework testing, view, directives and more.

ngDocs – AngularJS Reference

ngDocs is an Android app that provides AngularJS documentation and references, nice and simple. Some basic tutorials are also available if you are new to Angular. There are additional features like a developer guide and error reference that you may like to see. With this on your Android device, pick up on Angular wherever you go.





hongkiat.com

What Firefox version 35 means for developers

Read more about What Firefox version 35 means for developers at CreativeBloq.com


The latest version of Firefox – Version 35 – has been released. It packs some great improvements that should make the lives of developers easier and, well, just a little more awesome. youtube: zu2eZbYtEUQ The first noteworthy change is to CSS source maps, which are now enable, by default.




Creative Bloq

11 Bootstrap UI Editors For Developers

Many skilful people are involved in the web development industry to meticulously design and develop websites that can suffice the prime notions and requirements. Web development field is a massively growing technology and with its advent, it has been considered as a full time profession and professionals all across the globe are excelling in it. Such professionals work day and night and designed numerous toolkits to customize the framework to furnish an easy platform.

In this post, we are sharing with you some of the best Bootstrap UI editors that can help you achieve astonishing results in customizing framework flawlessly. Do let us know what do you think about this compilation. Feel free to share your opinions and comments with us via comment section below.

Layoutit

Create your frontend code simple and quickly with Bootstrap, using our Drag & Drop Interface Builder.

Bootply

A free Bootstrap editor and builder that also includes Bootstrap snippets, templates and examples using Javascript, CSS, HTML5 and jQuery.

Kickstrap

Kickstrap seamlessly combines Bootstrap with top-tier web technologies. It’s so advanced, it can run an authenticated, database-driven web app without a native backend.

Lavish Bootstrap

Generate your own Bootstrap color scheme from an image and customize to your taste.

Bootswatchr

BootSwatchr is the only Bootstrap customizer to support Right-To-Left language display. This feature is not included in any version of Bootstrap.

Pingendo

The simplest app to prototype with Twitter Bootstrap 3. For free.

Paintstrap

Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURlovers color scheme.

Bootstrap Live Editor

A WYSIWYG Editor built for Bootstrap. It offers a nice and elegant way to edit and beautify html with Bootstrap ready content/snippets.

Bootstrap Magic

Awesome features like contextual typeahead and colorpicker help you make your custom bootstrap 3.1 themes quickly and easily.

Style Bootstrap

Create unique web design with Twitter Bootstrap. Kw: themes, templates, styles. generator. customize.

Bootsnipp

Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework.


SmashingApps.com

Fresh Resources for Web Developers – January 2015

It’s here! We’ve finally left the tumultous year of 2014 and as we usher in a new beginning with the new year, we have new hope, wishes, and certainly new tools to try out. In this post, we have put together a handful of perfect tools and plugins to get this rolling.

From a handy online test tool to something for easy access to mobile design patterns, there are quite a few choices to get your 2015 on the right track.

Seti UI

Seti UI is a Sublime Text theme, not to be confused with Sublime Text Color Scheme. The theme in Sublime Text affects the app interface such as the tab and the sidebar. Seti UI is a ported theme. Its flat look is really nice to look at. A perfect choice of theme if you are using Sublime Text in Windows 8 or OS X Yosemite.

Seti UI

IXD Check List

Having a checklist can help you keep track on what has been done and what is to come. If you are a UI designer, you should probably add IXD Check List in your bookmark.

IXD Check List contains a collection of common to-do lists to check. Each item is supported with link references, so you can also learn why it’s on the list. If you prefer, there is a little button on the left where you can print the page and check the list offline.

IXD Check List

Coolors

Well, we have a handful of tools for picking out a color scheme already. But none is as easy as this tool, called Coolors. Simply hit the Space key and it brings up a new color scheme. It will generate new color scheme infinitely, derived from its algorithm and outsourced from its users contributors, as you repeat hitting the Space key.

Coolors

Nibbler

Nibbler is an online test tool that evaluates and scores your website for various factors including Code Quality, Mobile Compatibility, and Accessibility. It’s handy if you want to run a final check for your website before launch.

Nibbler

Velositey

Velositey is a Photoshop plugin to make the process of creating a website prototype in Photoshop easyil and quickly. This plugin allows you to quickly create a new document with a preset grid, adding preset web components, and generating icons or favicons. An indispensable Photohop plugin for every web designer.

Velocitey

Vagrant Manager

If you are using Vagrant in OS X, install Vagrant Manager. This app lets you manage multiple environments in a more convenient way. Once it is installed, it adds a new icon in the OS X task bar where you can monitor and control your virtual machines with only a few clicks. No more messing with command lines.

Vagrant Manager

CSS Specificity

CSS Specifity is one notorious topic of CSS which is not easy to digest. This tool is created to illustrate how this specificity concept works in an interactive manner. Draw several selectors and it will tell you which selector to apply.

CSS Specificity

CSS Dig

CSS Dig is a Chrome extension. And as the name implies, it will dig into your website and parse its CSS. It will show you a report which you can evaluate to perform required optimizations.

CSS Dig

Material Up

For those of you who might not aware of it, Google has just introduced Material, a new philosophy of its product design. Material Up is a collection of apps and websites that has already adopted this new philosophy. A good source of inspiration for web designers.

Material Up

Tindddle

Tindddle helps you enjoy Dribbble in a more streamlined manner. It will feed you with a selection of the best “Shots” from Dribbble. If you don’t like the particular Shot, hit the left arrow key of your keyboard, and if you like it hit the right arrow key. All the Shots that you have liked will appear in your Dribbble account — here’s a sample.

Tindddle

Mobile Design Pattern

The Mobile Design Pattern book is a collection of selected common mobile design pattern applied in mobile in 2014. Not only does it provide inspiration, the book also covers the decision and reasoning behind such design. A good book that should be on the digital book shelf of any web and app designer.

Mobile Design Pattern

FontAwesome Photoshop

FontAwesome is… awesome. To make it even more… awesome, install this plugin in Photoshop so that you can quickly add it in your design.

FontAwesome Photoshop





hongkiat.com

Valuable Tools/Resources For Web Designers & Developers

Web designers as well as web developers constantly need some web tools and resources to add into their toolboxes. Such tools and resources are meant to make their work easy and let them complete their tasks easily. By integrating such tools designers and developers make their daily routine work easier as well as faster for them. Moreover, some of the handy tools also allow designers and developers to communicate effectively with their clients and in this way they help in enhancing the productivity of the designer or developer.

For this assortment, we have compiled a collection of 40 valuable tools and resources especially for the web designers. With this list of useful resources, we want to help web designers improve their work flow and increase their productivity. Feel free to share this post with others and as well as on social networking website. You can also follow us on Twitter as well.

Source Tree

SourceTree is a free Mercurial and Git Client for Windows and Mac that provides a graphical interface for your Hg and Git repositories.

TmTheme Editor

TmTheme Editor is the a visual color-scheme/theme editor for Sublime Text and Textmate editors.

Ie-css3.js

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Colour Code

colourco.de is an online designer tool, which allows you to easily and intuitively combine colours.

Long Shadow Generator

It seems that “long shadows” are the new trend these days, especially on Dribbble. Now you can apply this style nice and easy to any type of layer. It works with smart objects and is available in 2 directions at 45 degrees. Enjoy!

Dimension

Dimensions is a responsive web design testing tool. It is the easiest way to test responsive websites at different viewports. It works offline & is compatible with LiveReload.

Mapita

A 3D map Photoshop action to convert a flat map to a three dimensional isometric stylish one a single click.

Buttons

A variety of highly customizable CSS Buttons built with Sass and Compass. The Buttons framework is ready to use and easy to install.

Fontastic

The Best Free Icon Font Generator: Create your Icon Font with more than 4000 Vector Icons.

Dev Tools Secret

Secrets of the Browser Developer Tools.

Popular UI

Free popular web UIs reproduced exactly in Photoshop for educational purposes.

Pixel Dropr

Create, use and share your own pixel collections.

Firefox’s Font Inspector

What’s My Browser Size?

A simple and beautiful way to find out your browser size.

HEX to RGB Converter

A simple HEX to RGB converter.

Heyoffline.js

Warn your users when their network goes down. Make sure they don’t lose anything.

PlaceIt

Your iPhone, iPad and other device screenshots automatically processed on the fly to be placed within a realistic environment of your choosing.

Alfred Workflows

A Few Of Our Favourites So Far.

PLTTS

With PLTTS you can search for colour palettes from ColourLovers. It’s easy to search for a palette with any specific colour. Or just bookmark your favorites.

Mincss

mincss is a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren’t used.

Chardin.js

Simple and beautiful overlay instructions for your apps.

CorMVC

An old attempt to build a jQuery and JavaScript powered client-side MVC framework.

Typograph

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.

JavaScript Frameworks Playground: jsFiddle

jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

jslib

Mozilla gives a great flexibility and power to Javascript. This popular client side scripting language can be used to create application level logic and services for cross platform application development.

HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP.

SproutCore

SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web.

IxEdit

IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

Show {if}

Graudit

Graudit is a simple script and signature sets that allows you to find potential security flaws in source code using the GNU utility grep. It’s comparable to other static analysis applications like RATS, SWAAT and flaw-finder while keeping the technical requirements to a minimum and being very flexible.

Snap{css}: an open-source CSS editor for Windows

To those of you that use notepad for your css files, we get it. It gives you greater control over your design, doesn’t add bloat code to your stylesheets, and doesn’t add a bunch of features that you never use to the interface.

Five Awesome On-Screen Rulers

They’re not the sexiest programs in the world, but for many designers, on-screen rulers are must-haves.

PowerPoint Search Engine with detailed thumbnail results

SlideFinder is a specialized search engine for PowerPoint presentations. Results are displayed at the slide level, enabling detailed search results.

BLOKK

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Timehub

Generate good-looking invoices from your GitHub repositories. Save yourself some time and send invoices with ease.

Dabr

Dabr is a PHP web interface to the Twitter API for mobile devices. The project is running live at http://dabr.co.uk and gets around one million daily page views.

Your Bookmarklets, On Steroids

Quix is an extensible bookmarklet, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet, so, basically, it’s like a command line for your browser!

Minibuilder

Flash MiniBuilder is a lightweight IDE created for developing programs written in ActionScript 3.

Real-time HTML Editor

Real-time HTML Editor.

Unicode code converter v7.0.1

Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes.


SmashingApps.com

Xbox One SDK leak could let developers make homebrew apps for the console

A group of hackers has reportedly leaked the full version of Microsoft’s official Xbox One SDK — the software kit that approved Xbox developers use to make games and apps for the console. The group, calling itself H4LT, announced the leak of the kit via its Twitter account, tweeting screenshots showing the SDK’s files to Microsoft’s official Xbox account.

Continue reading…

The Verge – All Posts