Posts by FRESHFACE

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Hey guys!

I would like to make a thread where people can share tips and resources for cross-browser testing.

I will start.

I am using OSX as my system of choice so everything below applies to OSX only (but some apps or their variations can be installed on other systems as well if you look it up):

IE6, IE7, IE8, IE9, IE10 and IE11

Install VirtualBox and Win+IE virtual machines images
  1. Follow the instructions here: https://github.com/xdissent/ievms#installation Please note that installing all IEs can take roughly 50GB because every IE comes with it’s own copy of Windows XP/7 (free trials)

iOS

Install Xcode to get the iOS Simulator
  1. Download and install Xcode from the Mac App Store.
  2. Launch Xcode.app
  3. From the top menu bar select: "Xcode –> Open Developer Tool –> iOS Simulator". This will launch a separate iOS Simulator.app in your Dock and if you right-click on it’s icon, you can then select: "Options –> Keep in Dock" so you can have it readily available without the need to launch Xcode first
  4. Switch to a desired iOS device in the top menu bar: "Hardware –> Device".
Using Safari developer tools to inspect websites in iOS Simulator
  1. Launch iOS Simulator.app and open a webpage
  2. Launch Safari.app
  3. From the top menu bar go to "Safari –> Preferences". Then switch to the "Advanced" tab and make sure you have "Show Develop menu in menu bar" checked
  4. From the top menu bar go to "Develop –> iPhone/iPad Simulator –> Your Webpage"

Android

Install VirtualBox and Genymotion
  1. Download and install VirtualBox. You won’t run the Android simulators via this app but it’s needed to be installed on your system.
  2. Download and install Genymotion. This is the app you will use to run Android simulators.
  3. Register for a free account at Genymotion. The basic features are free and should be enough for any web developer in most cases. You will need this account to download Android devices into their Genymotion.app.
  4. Launch the Genymotion.app and and click the "Add" button. Near the bottom is where you need to log in with your Genymotion account. Then you will be able to select an Android device from the "Available Virtual Devices". Simply follow the instructions to install that particular device and then just press the "Play" button to run it.

If you have any tips or resources in regards to cross-browser testing as well, please share them below. Thank you :)

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Hah, Wilson, that’s funny :) Looks pretty beat up for an airmail.

This video/commercial also shouldn’t be missed by Wilson fans:

http://www.youtube.com/watch?v=Bj3esvJv33M
1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says
1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Hi Athis!

You can just zoom in with Ctrl+ (Win) or Cmd+ (Mac) several times. Such big zoom will simulate a HiDPI device. After you zoom in you will need to refresh the page to load (some of) the retina versions of images. You can tell if the retina version of an image is loaded either by seeing a blurry picture or if you inspect it with a browser’s Developer Tools.

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says



Just curious, do you use compiler so there’s no ‘real’ CSS file in theme, only .less files (cached of course) or you put one compiled style.css and option to use .less for those more advanced users?

In our plugin (see codecanyon) we enqueue the LESS/SCSS files directly. Beginners can still write plain ol’ basic CSS into LESS/SCSS files without any problems.

You have to remember most people using pre-processors don’t write complex (WordPress) themes with stylistic user options so they are more comfortable just using a watcher/compiler on their PC. But like fitwp said, you can pass a LESS/SCSS variable from backend to one of your LESS/SCSS files – that right there can be really powerful. This also means you don’t have to output the custom code in head :)

Sounds great, but I’m wondering if it does have any impact on server? Isn’t it heavy task to compile the LESS/SCSS files, or is there some cache? I’m using it only on localhost and I didn’t test it but it seems to be a little bit slower, but I’ve never dug through that topic to learn more about it ;) Probably it’s time to do it.

I’m using this solution https://github.com/oncletom/wp-less but I’m going to try your plugin, is it possibel to include it in themes for sale on extended license?

There is a built-in cache, so compilation only happens if a change is detected in your LESS/SCSS file. Serving from cache takes about 1-2ms. So it does not have any impact on website visitors after it’s compiled and saved in cache. The compilation itself takes maybe a few hundred ms but it depends on the speed of your server and the size of your files.

Change detection is also very fast. The cached files are named with a hash that is generated from the file path and date of last modification of the LESS/SCSS file. So when you modify such file, the timestamp will change and the hash will be different. Therefore if there is no hash match in the cache, it will compile that single file again and save it as a new cache file with a new hash name.

Lastly, all cache files that have not been used in the last 14 days are automatically deleted to not bloat your server HDD over time.


...is it possible to include it in themes for sale on extended license?

Yes, absolutely, we try to design all our plugins in a way that they can be used by a different author under Extended License. If you would need any help, feel free to contact us directly, preferably in item comments.

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Just curious, do you use compiler so there’s no ‘real’ CSS file in theme, only .less files (cached of course) or you put one compiled style.css and option to use .less for those more advanced users?

In our plugin (see codecanyon) we enqueue the LESS/SCSS files directly. Beginners can still write plain ol’ basic CSS into LESS/SCSS files without any problems.

You have to remember most people using pre-processors don’t write complex (WordPress) themes with stylistic user options so they are more comfortable just using a watcher/compiler on their PC. But like fitwp said, you can pass a LESS/SCSS variable from backend to one of your LESS/SCSS files – that right there can be really powerful. This also means you don’t have to output the custom code in head :)

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Hi Keith!

We feel the same way, the power of CSS pre-processors is just too good to be ignored and the basics are easy to understand. We have just released a LESS/SCSS compiler WP plugin on codecanyon which we will use in our future themes and other authors are welcome to use it as well. This way you just work directly with the LESS/SCSS files and leave the rest on the plugin.

We will probably stick to LESS over SCSS because we feel its more easier for beginners and it does compile a little faster.

With our plugin you can pass a variable to the compiler via a WP hook. This is very useful when you have for example a Theme Options panel where the user picks a background color and you inject it as a variable to one of your LESS/SCSS files on the fly – its just awesome and we really believe in this approach :)

Regarding your last question, there are authors who run a 1 theme / 1 plugin scheme. Everything what is not transferable goes to the theme and what is transferable can be put it that plugin. But like you said, shortcodes should ideally be in a plugin and not in a theme – at least the core functionality and basic styling.

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

Hi! Have a look here under the term “toggle” :

http://codecanyon.net/search?utf8=%E2%9C%93&term=toggle
1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says


+1 For now, we are using our own system where the user fills the credentials here: http://support.freshface.net/login.php and then gets back to us with the generated private ticket ID in the comments. That ticket also self-destructs in a week or so for security reasons.

that’s really great, how did you integrate it to TF ? this would already solve the issues with getting access to a buyers credentials, if we would have this private option we can almost get rid of PMs in general

you should perhaps sell this system on codecanyon, it’s great Cheers UOU

There is no TF integration, it’s just done in the same visual style. I was told by our programmer that it’s fairly easy to write it on your own. We are not sure if releasing something like that to the public would be easy because there would be a potential security risk in having it basically open source. That would mean we would have to spend extra time to cover a lot of angles that we don’t have to now. It would go from an easy project to a difficult one. We will think about it though :)

We also used to scrape all of our item comments. We had our own comments search system – until Envato would implement their own search engine. Now we have it so we no longer use it, thanks Envato! :)

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 more
FRESHFACE says

@Freshface
Really big thanks for this great prog! But, what about the Mac version? Really need it. Please :)

We are all Macs here so it’s bound to happen at some time in the future, but we don’t have any actual plans for it right now.

by
by
by
by
by
by