Front End Factory Blog » Front-end

5 Tools for fluent remote project & team management for web design companies

frontend — Tue, 09 Feb 2016 22:21:00 +0000

Working with remote teams and clients in this business is almost everyday in every web design/development company. In this article I will show you how paying less than $100/month help us to be productive and efficient at the maximum.

1. Teamwork Projects – Your business timeline

Probably the best project management software out there. It involves so many great features like sub tasking, time tracking, invoicing with different hourly rates or taxes, milestones, late tasks, reminders, team chat, and etc. 100% brandable with many 3rd party integrations. You will just love it and get addicted to it.

Price: starts at $12/month
Free version: Yes
Mobile app: Yes
Visit Teamwork Website

2. Slack – chat for teams

The most efficient and funny way to chat with your team. Allows running multiple teams, chatting in many topics in groups or private, voice chat and screen sharing. Slack-hosted file sharing with great file & history search that will never let you loose an attachment.

Price: Free
Mobile app: Yes
Visit Slack.com

3. Invision app – design management made easy

InvisionApp is the best way to communicate with your clients and manage the design process. Gives great options for design prototyping and collecting/discussing on clients feedback. Even has option for you and your client to draw at the same time in the same screen. Thats amazing! Also you get notified about every single action, comment or file version change so that you will always be on track with what’s happening. Strongly recommend it for web designers and web design companies working remotely with their clients.
Price: $19/month
Free trial: Yes
Mobile app: No

4. ScreenHero – Sharing your screen or even the whole device

This amazing app allows you to share your screen while having a call with a client or colleague and even give them the ability to use your browser, keyboard and clipboard. Super fast and light solution that moves screen shares to next level.
Free trial: Yes
Mobile app: no
Visit Screen Hero website

5. Time Doctor – Stop wasting time

The software that raised our employees productivity with more than 30%. If you manage remotely teams work with freelancers or just want to take more of the time that you are paying to your employees TimeDoctor will help you do that. Offers great features like start/end work, tracking mouse moves, screenshot & weak time use, TimeDoctor can boost your team’s effectivity to the sky and lower your expenses paying for wasted time.
Price: $9/user
Free Version: Yes
Mobile app: Yes
Visit TimeDoctor

How to create front-end page from your wordpress plugin

frontend — Tue, 09 Feb 2016 21:33:44 +0000

When its about developing a wordpress plugin you can find many tutorials saying how to create your plugin, how to add your meta information and put some content in the wp-admin. Recently I faced the situation that I needed to create a front-end page when a plugin installed to wordpress so that we can show some content on the site.

The aim was to show a custom html/css page on a certain url /share/ and I found a really quick solution, that worked for me and I hope will work for you.

Two simple steps for this:

1. Create a page in wp-admin, called Share (slug share):

2. Add this piece of code In your plugin directory, and its mail php file (in my case index.php):

function elegance_referal_init()
{
	if(is_page('share')){	
		$dir = plugin_dir_path( __FILE__ );
		include($dir."frontend-form.php");
		die();
	}
}

add_action( 'wp', 'elegance_referal_init' );

Code for showing page in the front-end of the site when a wordpress plugin is installed

As you see it simply does 2 things:

1. Create a function that includes php file in the template directory, when we’re on the page called /share/

2. Run the action when wordpress is inited before any other script.

3. Put this code in your frontend-form.php (the page that will appear in your wordpress site front-end under the url /share/)





My WordPress Plugin Front-end Page



Here's my plugin front-end page
You can put anything you want in this php file.

Your front-end page code

I hope this snippet will help you.

Please share any other solutions that worked for you for this problem.

Double your front-end development speed with these 5 tools & tips

frontend — Wed, 20 Jan 2016 14:06:53 +0000

For the past 10 years we’ve been doing tons of front-end work, and for that time, we have found few very helpful tools that doubled the speed of front-end development process.

1. Write with Sublime Text

SublimeText is an ultra fast text editor that made our work so much easier and lighter. Supports a lot of features that will make you feel comfortable with your code.

Link: http://www.sublimetext.com/

2. Use Less/Sass with Prepros

Benefits of using less css or sass as css framework are so much. Once you get used to this you will never go back to writing old-school css. They come with powerful short-hand codes and functions that will decrease your source code’s line numbers with up to 30%. Reusing or developing the code that you build with less or sass is much more easier than the plain CSS code. Small example of sass:

.header {
.menu {
   li {
    a {
     display:block;
     .rounded(5px);
     background:#eee;
     &:hover {
        background:#ccc;
     }
    }
   }      
 }
}

Less example source code

Prepros complie all your less files into the css code you need immediately after you save.

Links:

http://lesscss.org/
http://sass-lang.com/
https://prepros.io/

3. CSS HAT for photoshop

This plugin will help you turning photoshop layers into css lines of code. It takes text proerties or layers blending options and turns them into a css/less or sass code that you can simply copy and past into your text editor. Saves you tones of measures and time ot check if you have written the right gradient or box-shadow properties.

Link: https://csshat.com/

4. Cut and slice me for Photoshop

Cut and slice me provides you very easy and fun way to export all your photoshop assets into web format graphics (png/jpg), with option to export few formats for them, also retina ready for vector shapes. Really cool photoshop plugin

Link: http://www.cutandslice.me/

5. Browser Stack

Oh man, where can i find IE 7 now to do tests.. or windows XP? Awful question, but s**t happens. The best way to have all kind of devices, OS, platforms and browsers in less than $30/month is using BrowserStack. Absolutely pays every cent of the amount when it’s a question of cross browser, device or platform testing. With the subscription you get remote access to all kind of virtual devices, OS and browser.

Link: http://browserstack.com/

That’s how we manage doing more within less time.
I would love if you share your way to work faster and easier.