Friday Dev Tip

  • Find the exact location of where a style is defined using Chrome Dev Tools

    Find the exact location of where a style is defined using Chrome Dev Tools

    This tip is definitely filled under "Stuff I wish I'd known sooner".

    In Chrome, when trying to locate where a specific style is located you can simply hold down Ctrl and left click on the style property.

    This will jump to the exact location of the property you were looking at in the file that it was declared in on the Sources tab.

    No more clicking on the file name next to the style property and then searching for it manually!

  • How to view input placeholder styles in Chrome

    How to view placeholder styles in Chrome

    Have you ever tried to view the style of html placeholder in the browser? By default in Chrome this option won't be available to you but if you press F12 to open the Developer Tools and then click on the 3 dots in the top right corner of the tool window you should see the Settings option.

    Click on this option and you will be presented with a screen that should look similar to what's shown above.

    Check the "Show user agent shadow DOM" checkbox and reload your page. You should now see the placeholder html output in your dev tools when you view the elements tab. Clicking on the placeholder html will bring up the applied styles for you to view or edit.

  • How to quickly mark a message as important using MS Teams

    How to quickly mark a message as important using MS Teams

    MS Teams has quickly grown in usage within organizations over the last 12-18months. It's easy to see why - it's simple to use and ties into an organization's existing security policies very easily.

    The only snag some people have with it is that when a lot of chatter is happening on a group channel important messages could be getting lost.

    There are usually 2 ways to work around this.

  • The simplest way to take a screenshot in Windows 10

    the simplest way to take a screenshot in Windows 10

    Most of the time when you want to take a screenshot you probably use the Snipping Tool built into Windows or another third party program like Greenshot but did you know that if you're using Windows 10 (creators edition or greater) you can take a screenshot by simply pressing Windows key + Shift + S?

    No more launching the snipping tool to quckly screenshot. Just press WinKey+Shift+S and the screen will grey out allowing you to drag the mouse around the area you want to capture.

  • How to print from Visual Studio Code

    How to print from Visual Studio Code

    I'll admit that personally I've never had a need in all my professional life to print code from Visual Studio but I know a few devs and project managers that do. I suppose it can be handy when you want to view something offline or hand out code samples for a meeting.

    A dev buddy was in touch recently and asked me how she could print from Visual Studio Code. Having never even looked for this option before I just assumed it existed where all Print options live in 'File -> Print...' or Ctrl+P but quickly realized that neither of these options exist in VS Code.

  • How to visualize an image map so you can debug it

    How to vizualize an image map

    Image maps are a handy way to add clickable zones to your images. When creating an image map from scratch most people would fire up their image editor of choice and work out the click zones using the editor.

    This can be ok when creating an image map from scratch but if you have to troubleshoot an image map issue or if you need to 'see' the clickable zones that really isn’t a workable solution.

  • ← Older Posts

Get In Touch

Follow me online at TwitterFacebook or Flickr.

You can also contact me by email.

Latest Tweets