How to pause browser execution when F8 is not working

Let’s break down a simple trick that can help you manipulate and understand your code better.

To begin with, access your developer console. This can usually be found in your browser’s Developer Tools under the ‘Console’ tab. Depending on the browser you’re using, you might need to use different shortcuts (like F12) or methods to open it. But don’t worry, a quick search on how to open the developer console in your specific browser should get you on the right track.

Once you’ve opened the console, the next step involves entering a particular command. All you need to do is simply paste the provided command line in the console. This is what we’re going to use to manipulate our code. After pasting the command, hit the ‘Enter’ key to execute it.

document.addEventListener('keydown', function (e) {

if (e.keyCode == 119) { // F8

debugger;

}

}, {

capture: true

});

Now, your code should still be in an ‘unpaused’ state. But when you press F8 on the keyboard, it should pause. It’s like freezing a moment in time, letting you thoroughly inspect and understand how your code behaves for specific elements. This can be especially useful when debugging hover-effects and mouseovers.

With this simple trick, your web development toolkit has a new superpower! Experiment, explore, and let your code reveal its secrets to you. Happy coding!”

How to use Git with InstantWP

If you are using the amazing free InstantWP WordPress development package often, then you might start wondering how to properly use it with Git version control. The difficulty is that trying to add the entire Linux Alpine virtual operating system to Git is too heavy, but adding only the contents of the Theme folder will not keep track of your posts and other database related content. I will outline the steps I used to get Git working with IWP below:

Continue reading “How to use Git with InstantWP”

Examples of Brackets plus the Emmet extension

Here’s how the Emmet extension for Brackets can really speed up your workflow:

-type #mydiv and hit tab to get <div id=”mydiv”></div>
-type lorem and hit tab to get lorem ipsum text
-type #container>.col-sm-4*3 and hit tab to get
<div id=”container”>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
</div>