Tools & Tips - Code Theory

10 Essentials For Using Chrome’s Developer Tools

Google Chrome’s Developer tools makes coding so much easier I’m not sure how developers ever lived without it. For those unfamiliar with it, the tool allows developers to edit their code in real time from their live web browser so they can see exactly how any changes they might make to their code would change or impact their sites. Essentially, it saves developers a lot of frustration when it comes to building, editing and maintaining their products. Developer Tools is generally easy to use and pretty intuitive for any developers, but just in case you missed something, here are our top ten tips for using Developer Tools to its full advantage.

1. The search function

Did you know Developer Tools has a search function that will search through a site’s entire source for you? It’s not immediately obvious that this function exists because there isn’t an easily accessible search bar. To use the functionality, you have to hit CMD + OPT + F (or CTRL + SHIFT + F, for you Windows users), and then you’ll be able to search for anything in the source code. This is great for trying to find those pesky HTML tags that get buried in nested code.

2. You can use the console to select elements

If you don’t want to search, you can also find items by selecting them in the console. Simply insert the element (or class or ID name) you’re looking for within the query selector $$() and all instances of that element will appear for you on the console (just like when using jQuery, be sure to place your element, class, or ID names in quotations or the selection won’t work).

3. Pretty Print

This is a cool feature that can be used when viewing the source code that will format any ugly or disorganized code to make it legible for you. You can find the Pretty Print icon (it looks like two brackets: {}) in the bottom left-hand corner of the editor in the source tab.

4. Color Picker

This is my personal favorite Dev Tool feature. When you select an element with any color attribute, you can actually click on the little color square in the CSS panel to access a color picker, where you can change the color of the element using the built in color picker. Not only does it simplify things, but it’s also pretty fun to play around with (you can also change the color from HEX to RGBA (or vice versa) within this color picker panel too — a super useful trick).

5. Toggle Element State

At the top of CSS panel there’s a button that says :hov, and if you click on it you’ll be able to toggle the element’s pseudo-selectors :hover, :active, :focus, and :visited, so you can see what the elements look like when all those states are activated. This trick seems to be particularly useful because it can be very difficult to edit how an element looks in it’s active state while not actually being able to activate the element (or access that element’s CSS state rules) because you’re using your cursor within Dev Tools.

6. Preserve Log

You’ll find this one particularly useful if you happen to use the console a lot. By checking “Preserve Log” at the top, your console log will be saved so that you can refresh the page without losing any of your data.

7. Device Toolbar

This one is probably pretty well-known, but just on the off chance that someone is new to Dev Tools, it should be known that dev tools offers an awesome way to view sites as they would appear on a mobile device or tablet (there are even several mobile device and tablet templates you can view). Gone are the days of constantly resizing your browser window and crossing your fingers that it looks the same on an iPhone. To activate the device view, click the icon that looks like a phone next to a tablet in the top left hand corner of the Dev Tools editor.

8. Edit HTML Elements

You can change the name, get rid of, or otherwise edit any HTML element in the elements console simply my double clicking on the element you wish to change. From there, go ahead and make your changes or delete the element as you wish.

9. Adjust the docking position

It seems like most developers prefer to work with the Dev Tools editor anchored to the bottom of their page, but if you like, you can change the position so that it appears anchored to the right hand side (this is actually the default positioning) or so that Dev Tools pops out as its own window. To toggle the docking position, click the vertical three dots next to the ‘x’ on the right hand side of the screen and select the position that works best for you.

10. Jump to line

You can jump to a particular line within a file in the source tab by pressing CMD + O (CTRL + O for Windows users) to easily access any part of the file without all that scrolling and searching.

Guide (Introduction, Implementation and How it Works) to A/B Testing and Split URL Testing (VWO, Optimizely, Google Analytics)

Recently I’ve been investing a lot of time into A/B (split) testing/experiments and analysing their results. Slowly I’ve started to love this way of rolling out changes on the web (can be surely used for mobile apps as well), as it is a complete data-driven approach and can produce quite surprising (or shocking, how you see it) results at times. With this approach you’ll always know what works (instead of speculating) with firm evidence and eventually drive more sales or signups or whatever that matters to you. That said, I would recommend not A/B testing just anything and everything but always find the right situations or cases that would make sense to experiment. If you’ve enough bandwidth (extra time) then use this approach to keep on analysing your visitor behaviour and draw learnings that help you make more prospects achieve the objectives that you’ve set for them, eventually turning them into customers.

Continue reading “Guide (Introduction, Implementation and How it Works) to A/B Testing and Split URL Testing (VWO, Optimizely, Google Analytics)”

Compiling Next Generation JavaScript (ES6, ES7, React) in Browser with Babel 6 and Above

Babel is an amazing tool for writing ES6 (ES2015), ES7 (ES2016), JSX, etc. code that finally gets compiled (or transpiled) into JavaScript (mostly ES5 as of now) that can be executed by most browsers. So basically you can use JS features like classes, promises, etc. without worrying about the browser support as Babel will eventually convert all your code into browser-understandable program.

Continue reading “Compiling Next Generation JavaScript (ES6, ES7, React) in Browser with Babel 6 and Above”

CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property

We’re well acquainted with the CSS3 filter property that lets us apply various effects like blur, grayscale, sepia, saturation, etc. to a particular element. Now using this property we actually end up adjusting the rendering of the entire element including its borders, background and content (text or/and image). Did you ever want to apply the same effects to just the area behind the element, i.e., the background of the parent element or the one right behind/below the target element ? This is now very easily possible with the backdrop-filter property. I’m sure you’d have noticed this effect being widely used in iOS 7 and OS X Yosemite.

Continue reading “CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property”

Custom Validation Messages for HTML5 Form Constraints

Well, we already know that with HTML5 from constraints, client side form validation has become super easy. All we have to do is use attributes like required, maxlength, pattern, step, etc. and/or the correct form type like email, phone, number, etc. and then once the user submits the form, the browser prompts invalid messages if the form is not entirely valid. Although it might not really be a requirement but from a coolness perspective I thought I’ll share the fact that the error messages can be customized.

Continue reading “Custom Validation Messages for HTML5 Form Constraints”

Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant action with the relevant GET/POST method specified (or defaults are used) or on submission of the form we use AJAX/XHR to send the form date to a specific URL with the required request type (GET, POST, PUT, UPDATE, DELETE, etc.). For a long time we had been implementing client side form validations in our JavaScript code (we still do) but then with the advent of the HTML5 constraint validation we have been doing a lot of the form validations right there in the form controls definitions by specifying the right type like email, phone, etc. with/without attributes like pattern, maxlength, required, steps, etc.

Continue reading “Trigger HTML5 Form Validation on JavaScript Submission (form.submit())”

JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()

Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you attach to a form’s submit event using addEventListener or onSubmit will not be invoked when you submit the form directly like this – form.submit().

Continue reading “JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()”