Graphic Designer Vs Web Designer

Results for How To

Enable and Disable Hibernation Options in Windows 10

Kamal Thakur Tuesday, September 29, 2020

Enable & Disable Hibernation Options in Windows 10

The Hiberfil.sys hidden system file is located in the root folder of the drive where the operating system is installed. The Windows Kernel Power Manager reserves this file when you install Windows. The size of this file is approximately equal to how much random access memory (RAM) is installed on the computer.

The computer uses the Hiberfil.sys file to store a copy of the system memory on the hard disk when the hybrid sleep setting is turned on. If this file is not present, the computer cannot hibernate.

How to make Hibernation Enable:

Press the "Windows" button on the keyboard to open the "Start Menu / Start Screen".
Search for cmd. In the search results list, right-click "Command Prompt", and then select "Run as Administrator".
When you are prompted by "User Account Control", select "Continue".
At the command prompt, type "powercfg.exe /hibernate on"and then press "Enter".
Type "exit", and then press "Enter" to close the Command Prompt window.

How to make Hibernation Disable:

Press the "Windows" button on the keyboard to open the "Start Menu / Start Screen".
Search for cmd. In the search results list, right-click "Command Prompt", and then select "Run as Administrator".
When you are prompted by "User Account Control", select "Continue".
At the Command Prompt, type "powercfg.exe /hibernate off", and then press "Enter".
Type "exit", and then press "Enter" to close the Command Prompt Window.

Enable and Disable Hibernation Options in Windows 10

Reviewed by Kamal Thakur on Tuesday, September 29, 2020 Rating: 5

Make Websites Efficient With Page Visibility

Kamal Thakur Saturday, September 19, 2020

The video player will automatically play and pause depending on the visibility of the page.

Learn a few techniques to create a responsive website that efficiently handles being out of sight with the power-saving Page Visibility API.

We've had tabbed browsing for about a decade. Most users are familiar with the idea of having more than one website open at a time, but it's hard to deduce when your site has their attention. Traditional 'hacks' are to attach an onblur or onfocus listener, but these are far from flawless as they often give false positives.

Enter the Page Visibility API. Although this JS API is still in its infancy, it’s 'a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU-efficient web applications'. It's currently a W3C Candidate Recommendation which has been championed by Microsoft and Google, so it’s not surprising to find it's supported in Chrome 13 and will be supported in IE10, as well as Firefox 10 and Opera 12.10. In this tutorial we'll pause and play a video; prevent erroneous visits being added to page analytics; and stop Ajax requests until the user returns, saving greatly on server load.

Although a tad dry, it’s well worth reading up on the W3C spec – it tells you most of what you need to know and can really help you out if you get stuck

STEP 1: Adding The Listener

It's incredibly easy to start using the Page Visibility API; if you’ve ever added a click handler this syntax will look very familiar. The visibilitychange event is triggered by several actions: when a user navigates to/from the tab your site is in, when the browser is minimized and when the OS is locked.

CODE:

document.addEventListener( 'visibilitychange', function() {
//do stuff
}, false);
/* jQuery way */
$(document).on( 'visibilitychange', function() {
//do stuff
});

Page not in view: evidence that our JavaScript is up and running by switching between tabs.

STEP 2: Catering For All Browsers

Of course, this wouldn’t be web development if it were that easy. Currently, most of the browsers that support the Page Visibility API do so with their own vendor prefix (except Opera). To account for this we can quickly check if the prefixed version is undefined or not.

CODE:

var prefix;
if ( typeof document.hidden !== 'undefined' ) {
prefix = '';
} else if ( typeof document.webkitHidden !== 'undefined' ) {
prefix = 'webkit';
} else if ( typeof document.mozHidden !== 'undefined' ) {
prefix = 'moz';
} else if ( typeof document.msHidden !== 'undefined' ) {
prefix = 'ms';
} else {
window.alert('Your browser doesn\'t support the Page Visibility API');
return;
}

In view! Now to deliver all that rich content we’ve been saving up…

STEP 3: Helping Ourselves

Right, we've now determined if the browser supports the API and which vendor preix to use. To use this data though, we need to check the Boolean value of document.hidden. We could check for each prefix like if (document.hidden || document.webkitHidden ||, etc), but that could quickly get tiring for our fingers. Instead, we’ve written a function to prevent RSI.

CODE:

function isHidden() {
if ( prefix === '' || typeof document.hidden !== 'undefined' ) {
return document.hidden;
} else if ( prefix === 'webkit' || typeof document.webkitHidden !== 'undefined' ) {
return document.webkitHidden;
} else if ( prefix === 'moz' || typeof document.mozHidden !== 'undefined' ) {
return document.mozHidden;
} else if ( prefix === 'ms' || typeof document.msHidden !== 'undefined' ) {
return document.msHidden;
} else {
return null;
}
}

STEP 4: The Universal Approach

With that in place, we can simply call that function to determine the page’s visibility. You’ll probably notice that we have explicitly checked if hidden is false as opposed to the shorthand !isHidden() because that would evaluate as true if isHidden() returned null.

CODE:

document.addEventListener( prefix + 'visibilitychange', function(event) {
if ( isHidden() ) {
} else if ( isHidden() === false) {
}
}, false);

STEP 5: Video HTML

Now we’re starting to get to grips with the Page Visibility API it’s time to do something with it. To kick-off, we’re going to be pausing and playing a video when the user visits a different tab. We’ll start by writing the HTML for the video and include the visibility.js script.

CODE:

<video width="550" height="360" controls autoplay>
<source src="my-video.webm" type="video/webm; codecs='vp8.0, vorbis'">
<source src="my-video.mp4" type="video/mp4; codecs='avc1.4D401E, mp4a.40.2'">
<source src="my-video.ogv" type='video/ogg; codecs="theoravorbis"'>
<p>Your browser can't play this video :(</p>
</video>
<script src="visibility.js"></script>

STEP 6: Controlling The Video

HTML5 video allows us to control its playback with JavaScript through its own very simple API. We’re going to be using two of its methods: play() and pause(). To use these we need to lock on to the video’s node; this assumes it’s the only video element on the page by getting the first in the list.

CODE:

var video = document.getElementsByTagName('video')[0];
document.addEventListener( prefix + 'visibilitychange', function(event) {
if ( isHidden() ) {
video.pause();
} else if ( isHidden() === false ) {
video.play();
}
}, false);

STEP 7: Pause For A Moment

This has the desired effect! Marvel as you never miss a frame of video playback again. Unfortunately, our implementation will pause and start it even if the video has already been watched or was paused by the user. To get around this we are going to check if the video is paused at the point they navigate away from the page.

CODE:

if ( isHidden() ) {
paused = video.paused;
video.pause();
}

STEP 8: Play It Again…

In the previous step, we used a property called paused to check if the video was stopped; we’re now going to use some other properties specific to the video tag to make an educated guess as to whether the video should be played when the user navigates back to our site.

CODE:

if ( video.currentTime > 0 && !paused && !video.ended ) {
video.play();
}

STEP 9: Let’s Recap

Great! We should now have a video that only plays if it was playing, wasn’t paused, and hasn’t ended. This is a good example of progressive enhancement where – if the technology is available – we can add extra levels of functionality to make users’ lives a little easier.

STEP 10: Visibility State

As well as document.hidden the Page Visibility API also adds another attribute: document.visibilityState. This has four possible values: visible, hidden, unloaded, and prerender. Like hidden, it’s current vendor-prefixed so let’s first make a similar function to isHidden() that deals with this.

CODE:

function visibilityState() {
if ( prefix === '' || typeof document.hidden !==\'undefined' ) {
return document.visibilityState;
} else if ( prefix === 'webkit' || typeof document.webkitHidden !== 'undefined' ) {
return document.webkitVisibilityState;
} else if ( prefix === 'moz' || typeof document.mozHidden !== 'undefined' ) {
return document.mozVisibilityState;
} else if ( prefix === 'ms' || typeof document.msHidden !== 'undefined' ) {
return document.msVisibilityState;
} else {
return null;
}
}

STEP 11: Verifying Analytics

When looking at visibilityState the First two values make sense, but prerender is a bit weirder. Some browsers (such as Chrome) pre-render pages that they think the user will click on to speed up browsing. Because this counts as a page view it can skew analytics into thinking they’re getting more views than they really are. We can Fix this with the Page Visibility API.

CODE:

if ( visibilityState() !== 'prerender' ) {
//your analytics code
}

STEP 12: How Long?

You might also find it useful to work out how long a user has been away from your website – either for analytics or to modify an element of your page in some way. When the visibilitychange event is fired it gives us a number of properties – one of which is the timestamp for when the event occurred.

CODE:

if ( isHidden() ) {
timeAway = new Date(event.timeStamp);
}

STEP 13: We Missed You…

We've used JavaScript’s built-in Date object so that we can work with the UNIX timestamp. To calculate how long they were away we can simply subtract one date from the other. We’re also dividing it by 1,000 to convert milliseconds to seconds and rounding the result up to make it more readable.

CODE:

} else if ( isHidden() === false ) {
var delta = new Date(event.timeStamp) - timeAway;
window.alert('You were away for ' + Math.round(delta / 1000) + ' seconds');
}

STEP 14: Changing The Title

This only fires when they leave and come back, but what if you want to do something on your site once the user has been away for a certain amount of time? We can use setInterval() to check how long they’ve been gone. If the user is away for, say, ten minutes, we change the title to ‘Close me!’.

CODE:

setInterval(function() {
var delta = Date.now() - timeAway;
if ( delta > 600000 ) {
document.title = 'Close me!';
clearInterval( this );
}
}, 10000);

Amaze (or annoy) your users by telling them to close your tab by changing the page’s title after a set time.

STEP 15: Reverting The Title

Once they come back, we want to change the title back to what it was; you can do this with a simple if statement. It’s worth noting that just because we can do things like this it doesn’t mean we necessarily should. Adding a setInterval when a page isn’t being viewed is extra load on the CPU, but on the other hand, it does offer developers some extra creativity.

CODE:

} else if ( isHidden() === false ) {
if (document.title !== 'Page Visibility API tutorial') {
document.title = 'Page Visibility API tutorial';
}
}

The tab preview shows it has still only made one request.

STEP 16: Turning To Ajax

Okay, so the last example was a bit gimmicky – it’s unlikely many web developers are going to start encouraging people to close their page after they’ve been gone for ten minutes! Perhaps a more useful application of the Page Visibility API is to stop Ajax requests when they’re not needed.

CODE:

var requests = [],
makeRequests;
function getSomething() {
}
function stopRequests() {
}

To visualise Ajax requests the counter increases for every request made.

STEP 17: This Was A Triumph

The requests variable is going to store all requests (ideally you’d remove requests once they’ve been completed). We’re going to use the jQuery ajax method for its simplicity. Within the getSomething() function, add:

CODE:

var request = $.ajax({
url: ' HYPERLINK "http://lab.fetimo.com/pagevis/resource.json'" http://mysite.com/resource.json',
success: function(response) {
$('body').append(response.message + '<br>');
}
});
requests.push(request);

You probably have better things to do with requests than simply output "This was a Triumph", but whatever the message, the code is the same.

STEP 18: Cancel That

jQuery has a handy property called beforeSend on its ajax method which lets you – among other things – set custom headers and, ultimately, decide if the request should be made. We’ll use this to only send a request if the page is visible by returning false if the page is hidden; returning false stops the request from being made.

CODE:

request = $.ajax({
beforeSend: function() {
if ( isHidden() ) {
stopRequests();
return false;
}
},

STEP 19: Setting intervals

To simulate an Ajax-style application making many requests we'll set up a setInterval to make a request every second within getSomething(). We assign it to a variable so that we can clear it in the next step – otherwise, it would be making requests forever! We also don’t want multiple timers, so it has been wrapped in an if statement.

CODE:

if ( !makeRequests ) {
makeRequests = setInterval(function() {
getSomething();
}, 1000);
}

STEP 20: Abort!

Next, we'll write what stopRequests() is meant to do. We will loop through the array and use jQuery’s abort() function on each of the active connections. We’ll then clear the interval that emulates an application making requests for us and reset the variable to be undefined; if we didn’t do this it would remain as the ID of the setInterval.

CODE:

requests.forEach(function( request ) {
request.abort();
});
clearInterval( makeRequests );
makeRequests = undefined;

STEP 21: Initialise Requests

The last thing to do is initialize getSomething() to start making requests both when the page is visible and on initial page load. This will complete emulating a JavaScript app making requests so that we can see the effect of our dabbling with the Page Visibility API.

CODE:

} else if ( isHidden() === false ) {
getSomething();
}
}, false); //close event listener
getSomething();

Once we go back to the tab, it starts to make requests again.

STEP 22: Tidying up

Now that we know this works you can change the requests array from storing every request made to just active ones by removing them on request completion. If you know you only ever make one request at a time you can simply do request.pop(); however, here we’re going to compare each element in the array and see if it’s exactly the same as the variable in memory.

CODE:

complete: function() {
requests.forEach(function( req, i ) {
if ( req === request ) {
requests.splice( i, 1 );
}
});
}

Make Websites Efficient With Page Visibility

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

Sci-Fi Effects In Photoshop

Kamal Thakur Saturday, September 19, 2020

Push the effects to the max: You can take your buttons to another level by applying hot to soft orange gradients and a thin 1px Inside Stroke at 30% Opacity. This will further enhance your luminous effects. Grouping respective layers into Smart Objects and sharpening also helps to intensify the futuristic feel.

• Inspiration: www.disney.co.uk/tron

Tron Renaissance: “In 1982 Tron was released and inspired millions of graphic designers, spawning franchises across the globe. Sadly, for many years, the film’s looks couldn’t be translated online – hardly a surprise as the web didn’t really take off until six years after the film! However, with a resurgence of the brand thanks to TRON: Legacy (released in 2010), and the much more advanced capabilities of contemporary software, these boundaries thankfully no longer exist.” - Adam Smith

Cinema is awash with awesome Sci-Fi special effects right now that are being deployed in branded websites, as well as inspiring others to create more personalised styles. From floating transparent panels to holographic Flash effects and energised lighting and colour, many sites are being given a futuristic twist.

A great example is www.disney.co.uk/tron. The site’s design follows the aesthetics of the TRON 2.0 brand meticulously, littered with neon lighting – most noticeably in the page’s buttons and panels. These sport outer glow effects that are further boosted through the use of textures, along with a little Flash animation and electronic audio.

Here we’ll show you how to recapture the 2D effects of this website using the power of Photoshop’s layer style options and shape tools. These effects can be enhanced further still with a bit of your own creativity.

#1 - TOOL TIPS: Create A Bokeh Brush

Bokeh is great for enhancing focal points in lighting effect images. It creates the illusion of depth of field in 2D digital formats – a great asset for web designers looking to create authentic floating or holographic futuristic elements. Creating this effect wholly in Photoshop is easier than you might think. Start by opening a new layer and applying a light grey (#6c6c6c) Ellipse shape. Add a white 2px Stroke set to Outside. Ctrl-click your shape layer, selecting Convert to Smart Object. Cmd/Ctrl your Smart Object and select Edit > Define Brush Preset. Now apply this to a new layer at 10% Opacity, with the Scattering parameter at 1,000%.

#1 - TOOL TIPS: Create A Bokeh Brush

#2 - TECHNIQUE: Nail Neon Effects

STEP 1: Set Up Your Canvas

Open a dark navy backdrop layer. Set your foreground colour to #364f7c then select Gradient Overlay from the Layer Styles options. Set Opacity at 30% and Scale at around 85%. Create a new Soft Light layer and choose a large blue (#364f7c) brush. Make sure that Pen Pressure is activated in the Brush Presets.

STEP 1: Set Up Your Canvas

STEP 2: Shaping Up

Apply your brush to the edges of your image and add a layer mask. With this active, go to Filter > Noise > Add Noise > Amount 11% to limit gradient banding. Select the Pen Shape tool and draw out a shape like above. The Ellipse shape tool has been added in the bottom right corner, set to Combine Shapes.

STEP 2: Shaping Up

STEP 3: On The Right Path

Set blending to Overlay and add a layer mask. Apply a 50% Opacity black-to transparent gradient to the bottom-right of your shape twice. Cmd/Ctrl-click your shape layer thumbnail, create a new layer, select the Paths panel and choose to Make Work Path from a selection. Cmd/Ctrl-click the path thumbnail to make a selection.

STEP 3: On The Right Path

STEP 4: Add An Outline

Select a small hard orange brush and Ctrl-click your path, before choosing the Stroke Path option. Apply a #f47a20 colour, with Opacity at 53%, Noise at 5%, Spread at 8%, Size at 16px and a Screen blend mode. Duplicate the outline layer, setting blending to Screen. Press Cmd/Ctrl+U and drop the Hue to -180.

STEP 4: Add An Outline

STEP 5: Time To Erase

Next, apply a layer mask to this layer and erase halfway from the left. Reactivate your original shape layer and apply a Tiles-Smooth Pattern overlay (in Layer Styles) at 25% Opacity and 85% Scale. Use what you’ve learnt to create a new shape (see above) in the bottom-left corner of your design.

STEP 5: Time To Erase

STEP 6: Feather-Light Touch

Duplicate your original shape layer and your last shape, reset both the blending modes to Normal, then delete any attached layer masks and layer styles. Place both new layers at the top of the stack, Cmd/Ctrl-click them and press Cmd/Ctrl+E to merge. Now select the Feather Elliptical Marquee tool at 1px size.

STEP 6: Feather-Light Touch

STEP 7: On The Button

Next, select the right-hand side of your shape and add a layer mask, inverting this (Cmd/Ctrl+I). Drop the new layer’s Opacity to 20% with Fill at 35%. Create your button by selecting the Ellipse shape tool and activating the Path setting. Draw out your circular button on another new layer and open up the Paths panel.

STEP 7: On The Button

STEP 8: A Glowing Finale

Cmd/Ctrl-click your path, selecting Stroke Path, with a hard, hot orange brush. Edit your shape to taste with a layer mask. Now add a pale orange Screen blend mode, Outer Glow, at 55% Opacity and 7px Size. Lastly apply a white Screen blend mode, Inner Glow, at 25% Opacity, with the Choke set to 18% and Size to 6px.

STEP 8: A Glowing Finale

Sci-Fi Effects In Photoshop

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

Fixed Headers and Web Fonts Explored

Kamal Thakur Saturday, September 19, 2020

Colour co-ordination: Getting the right colour palette is critical to creating a website that conveys the right message, works with its surroundings and is easy to view. Two tools to help you with this are Adobe Kuler (http://kuler.adobe.com) and Color Scheme Designer (http://colorschemedesigner.com).

• Inspiration: www.kitchensinkstudios.com

Retro design, contemporary code: “The Kitchen Sink Studios site’s retro-inspired design uses HTML5, CSS3 and jQuery coding to allow for strong SEO and the ability to view it on all kinds of devices while preserving the design. Highly optimised CSS, streamlined navigation and heavy use of web fonts were just a few of the many approaches that went into the website.”

The right mix of web typography and HTML5 backgrounds can produce an imaginative and standards-friendly web presence, as seen in the Kitchen Sink Studios site. Typography is the key component and great use is made of a simple combo of typefaces, which are given extended mileage with clever use of colour, style size and positioning. The two font families forming a formidable partnership here are Bodoni and Brandon Grotesque. While they are the focal point, the background textures, images and colour palette all shout retro yet reined. On a more functional level, the single-page design uses a fixed header element, combined with a smooth scrolling script for the navigation.

#1 - Resource: Smooth Scrolling With Easing

Activating a link in the navigation menu sees the site deploy a smooth scrolling action down to the chosen section. This effect is all thanks to jQuery.

To use this the jQuery library needs to be referenced and either linked to or placed on the server. The obvious place to get this is http://jquery.com or you can use a web-based library as per Google – take a look here: http://code.google.com/apis/libraries/devguide.html#jquery for more info. To create the scrolling effect the Easing plug-in is used. A great example and guide can be found at http://bit.ly/bD57s4.

#2 - Technique: Fixed Navigation

STEP 1: Introducing The Nav Tag

Typically, the navigation menu of a site is kept inside its own specific div tag or, if it’s HTML5-friendly, it will reside inside the nav tag, as seen here. Whichever tag is being used, it needs to be placed in a fixed position in order to remain a constant element.

CODE:

<nav>
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>WORK</li>
</ul>
</nav>

STEP 2: Fix The div Tag Position

Fixing the position of a div tag is an incredibly straightforward task – in fact, the only thing that it requires is the application of the position tag. Add the following code – position: fixed; – to the nav, or relevant tag, as shown below (line 4) and save. The tag will now be locked into its position, which will enable the page content to scroll under the menu.

CODE:

nav{
height: 35px;
width: 1000px;
position: fixed;}

STEP 3: Add Some Padding…

Fixing the navigational tag will mean that the next div tag – say, for example, #maincontent (line 1) – will be effectively placed behind the nav tag; this means it will hide any content at the top of the tag. To accommodate this side-effect, you can apply a little padding (line 4) – approximately the same size as the nav height – to the top of the #maincontent tag.

CODE:

#maincontent {
height: 500px;
width: 980px;
padding-top: 50px;}

STEP 4: …or Float The Margins

An alternative solution to the padding option considered in step 3 is to add a margin (line 4) instead, but this on its own can cause the fixed header to adopt the margin and move the header down the page. To compensate for this, the tag can be floated to the left (line 5), which will move the header back to the top of the page where it belongs.

CODE:

#maincontent {
height: 500px;
width: 980px;
margin-top: 50px;
float: left;}

#3 - Inspiration: Borrow From The Past

There is no doubt that the design inspiration for the Kitchen Sink Studios website has gone back in time and borrowed a number of elements and ideas from the past. This gives it a fascinating old-fashioned feel, from the imagery to the graphical elements to the aged paper texture seen throughout.

But the element that probably most stands out in terms of its retro roots is the typography. The site makes extensive use of the Bodoni font which is cleverly partnered with Brandon Grotesque. To generate the sheer variety of type seen on the Kitchen Sink site a selection of weights, styles and colours have been used. The fonts are well complemented by the aged backgrounds and textures that surround them.

#3 - Inspiration: Borrow From The Past

#4 - Technique: The @font-Face Generator

The web font revolution has seen an influx of new typefaces. Font Squirrel provides its own examples and code to get you started.

STEP 1: Find Favourite Fonts

There are a number of ways to use @font-face, but this is one of the best. First, obtain fonts from sources like MyFonts (www.myfonts.com) or FontSquirrel (www.fontsquirrel.com). Now head to www.fontsquirrel.com/fontface/generator.

STEP 1: Find Favourite Fonts

STEP 2: Generate Code

Click Add Fonts and select the ones you want from your system. If using for web alone be aware of the different formats. Click the Agreement checkbox to activate the Download Your Kit button; this will provide a ZIP file with the necessary code and fonts.

STEP 2: Generate Code

STEP 3: On To The Web

Add the font to the same location as the HTML file being used; add all variations for greater compatibility. Now use the CSS file or add the @font-face code to a style sheet already being used. Finally, you need to add the appropriate code to a tag, ie: h1 {font: bold 50px ChunkFiveRoman;}.