Great Customer Support From Adobe!

“Adobe Photoshop CC is not responding.” This is all I got to go with. I could have waited for a response from the software or I could have sent a report to Microsoft but we all know that those are not real options. I don’t even know what the “Report problem” button does or if it even works or not. So I did what every person would do: Google it. Luckily it seems this is a common issue, but with multiple sources so naturally it would have multiple recommended solutions.

I have tried many suggested solutions, here is a brief list:

  • Licence reset
  • Driver re-install
  • Driver down- and up-grade
  • Removing and installing Creative Cloud
  • Removing and installing Photoshop

Contacting Adobe Live Support for help

All these had no success at all. After 3 hours of unsuccessful attempts I contacted Adobe Support on the verge of true panic as I had 2 deadlines that day, and half of my working day has already passed away with panic and frustration. I was preparing to cancel my after work gaming session and chill time to catch up to my timetable.

I used Adobe’s live support. The first person with whom I got in touch with was very helpful. She asked questions to see if I might have missed a a few basic methods of restoring the software suite to working order, but she quickly noted that I have managed to get into a bad situation that she could not help me out of herself. So She escalated my ticket to a higher level Tech Support representative.

[flde_special_heading heading_size=”h3″]at this point I was so desperate  that I would have probably sold my soul to the first bidder who restored my Adobe suite to a fully working condition[/flde_special_heading]

The new support representative asked me few basic questions like: ‘Problems encountered?’ and the methods I had tried to fix said problems. After a few lines of conversation he asked me if I would allow him to take control over my computer to see if he can fix the problem quickly. At this point, I would have gladly sacrificed a goat or named my first-born after him. I agreed to this, even though I don’t like it when people try to poke around my machine. He gave me a short code and a link to download a specialized desktop software from. Then we got started!

Path to Figuring Out the Crash

The software was a Java application that I downloaded and installed on my machine (ewwww… Java). Please note that under normal circumstances I would have just instantly deleted this software as I don’t trust Java as far as I can throw it, but at this point I was so desperate that I would have probably sold my soul to the first bidder who restored my Adobe suite to a fully working condition. After the installation, I copy & pasted the code, and started the session.

I have to admit: I was very surprised. I run Windows on my native language (Hungarian) so I expected the supporter to just give up and give me the instructions how to resolve this problem. But au contraire! He navigated my Hungarian Windows with dual monitors like he was the one who set it up and had used it for months now. It took the representative all of 2 minutes to repair and restore my Creative Cloud software and all related apps to full working condition.

The supporter then opened up a few PSD-s and images in Photoshop to make sure that it was in full working order, after which he signed off. The installed remote desktop app reported that the connection was closed and asked me if I want to remove it from my computer. I clicked ‘Ok’, and the software removed itself from my PC. Every file and registry entry was removed without a trace; which was a really nice surprise.

So what should you do if you get this message: “Adobe Photoshop CC is not responding”?

  1. Close down Adobe Creative Cloud.
  2. Hit ‘Windows BTN’ + ‘r’ <- The run command dialogue.
  3. %appdata%
  4. Navigate to this folder: ‘C:\Users\username\AppData\Roaming\Adobe\Creative Cloud Libraries\LIBS’
  5. Find this file: ‘librarylookupfile’
  6. rename it to ‘old_librarylookupfile’
  7. Restart Adobe CC.

This should restore your adobe applications to working order (granted it will only work if your source of the problem is the same is mine).

[flde_special_heading heading_size=”h4″]Please note that there may be more problems that cause similar unresponsive programs. Most commonly, the graphics driver causes issues with the application. The above solution is just one of many possible resolutions to a problem.[/flde_special_heading]
[flde_special_heading heading_size=”h4″]If you feel your are stuck don’t hesitate to contact Adobe Live Support for help![/flde_special_heading]

The Conclusion

In any case, I have to give Adobe a nice cookie for this. While the issue is unique to Adobe, they still have a very well trained crew of experts to help you solve any issue and quickly get back to your work. This premium quality support is well worth the price of the CC suite.  Especially if you consider that you are making your honest living using their amazing software to begin with. A good quality support for a premium software and services is expected and much appreciated to have.

 

[Tutorial] Preloader Splash Page

Website loading speed is a crucial thing to keep an eye out when you develop a project. Using heavy images, large JavaScript files, and having a bloated site in general will result in slow loading speeds for the average user. This might frustrate them, which might force the user to leave the site before they actually have had a look at the content. In the worst case scenario, while the site is loading it might not even display anything, and for a slow loading site and the user might end up leaving.

[flde_special_heading heading_size=”h3″]You can check out and grab the finished code from my codepen.[/flde_special_heading]

[codepen_embed height=”264″ theme_id=”20522″ slug_hash=”LprGLb” default_tab=”result” user=”LordFren”]See the Pen <a href=’http://codepen.io/LordFren/pen/LprGLb/’>A simple preloader splash page</a> by Lord Fren (<a href=’http://codepen.io/LordFren’>@LordFren</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

This code has a simple animation built in. You can use it or you can replace it with your own.

[flde_special_heading heading_size=”h4″]The HTML[/flde_special_heading]

<div class="loader-wrap">
  <div class="loader">
    <div class="loader-logo">
      Put your logo, or custom text here!
    </div>
    <!-- Custom Loading Animation -->
    <div class="loader-inner pulse-ball">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!-- Custom Animation End-->
  </div>
</div>

Paste this just after the opening <body> tag in your HTML file. We will be using CSS to style all of the elements and animate them. Make sure to not include large files or a lot of graphics here. This has to be as light as possible, so it loads almost instantly for any user.

[flde_special_heading heading_size=”h4″]The CSS[/flde_special_heading]

This is the part where most of the magic happens so let me go through all the important steps.

 

.no-js .loader-wrap {
  display: none;
}
.js .loader-wrap{
  display: block;
}

This part is not mandatory, but I have included nonetheless.

If you are using a browser feature detect method, like Modernizr, you can use this snippet to hide or display the loader overlay depending if the JavaScript is turned Off or On in the browser of the user. If you do not already import detects, you can skip this step. Most of the users will have JavaScript enabled by default and it takes a lot of effort to turn it off nowadays for little to no gain.

 

.loader-wrap{
  background-color: #f05a28;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  z-index: 9999;
}

This is the colored background of our loader. position:absolute; takes the contents and the <div> out from the normal flow of the website. We set it to 100% width and 100% height to ensure it will cover the entire site and add a z-index: 9999; to make sure it is always on top.

 

.loader-wrap .loader {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}

We, again, call for the position:absolute; property to help us position this element to the centre of any screen with top:50%; and left:50%;. If you stop now and check the results you will see that it is not in the centre. This is because we did not take the element width and height into account when we positioned them.

We can actually branch off into 2 directions to solve this problem. We will go over both of them.

For the older method to work we needed to know the exact dimensions of the <div> and add negative margins for it to display in the exact centre. Let’s say this <div> was 200px in width and 100 px in height. What we needed to do was divide these by two and add that as a negative margin to the <div>. For the left margin we take the width of the <div>. 200/2=100 so we needed to add margin-left:-100px;. For the top margin we take the height of the <div>. 100/2=50 so we needed to add margin-top:-50px;. However (and lucky for us!) this is in the past now.

Nowadays we have evolved from the caveman era of CSS to a more civilized solution where we don’t need to know the exact dimensions of the <div> element because we can apply transform: translate(-50%, -50%);. The transform property is always relative to the element that it is being applied to and translate is how you move the <div> into place. It basically calculates the dimensions of the <div> and moves them by a percentage based off of these measurements. Pretty nifty, huh?

[flde_special_heading heading_size=”h4″]The jQuery[/flde_special_heading]

$(window).load(function() {
  $(".loader-wrap").fadeOut("slow");
});

Let me explain the above code in simple terms. After the site ($(window)) finished loading all resources, triggers a function to hide (.fadeOut("slow")) the pre-loader overlay from sight. Making the waiting time and transition easy. I left the fade out animation simple, but if you wish you can add your own animations to make the overlay appear or hide.

[flde_special_heading heading_size=”h4″]The conclusion[/flde_special_heading]

As you can see this is a really easy and quick way to add a pre-loader splash page to your website. Adding this feature to your site will make the experience more pleasant for people who have slower connection speeds.

There are multiple ways to expand on this simple solution. For example, you can add your own animations for when the site finishes loading and the overlay is going to be hidden. Feel free to add your own loading animation and experiment with other functions and features.

Let me know what you think! Share your thoughts and implementations with me on Twitter @LordFren.

 

Update:

The previous version of the code used Absolute positioning (position: absolute;) which caused a few issues:

  • Unless you used a full height page (no scrolling) the scrollbar appeared
  • If you were scrolled down and refreshed the loader did not follow you, meaning it looked broken.

I have replaced the code with position:fixed this will make sure that the overlay will always cover the site completely.

Known issues

If the JavaScript is disabled in the browser this method will leave the site hanging… (Who does this?! – Editor).

To ensure compatibility for users without JavaScript you should always include Modernizr or similar piece of code to ensure JavaScript support.

The scrollbar is always visible on pages that are larger than the viewport.

This is not really an issue but if you want to remove the scrollbar you can expand the script a bit.

  • Add an overflow:hidden; to the body tag to disable scrollbars altogether.
  • Using the already added JavaScript you can re-enable the overflow after the loading is done by setting overflow:auto;
$(window).load(function() {
  $(".loader-wrap").fadeOut("slow");
  $("html, body").css('overflow', 'auto'); 
});