Forem: Dirk Strauss

Installing Visual Studio Code on Linux

Dirk Strauss — Thu, 22 Apr 2021 19:03:04 +0000

Installing Visual Studio Code on Linux is quick and really easy. If you are a Linux user, then this article might be old news to you. If, however, you are a developer that usually works on Windows but likes to play around a bit with Linux, then stick around. Perhaps this article can give you some pointers.

Looking for something else? Try these links instead:

As you know by now, Visual Studio Code is free and built on open source. Git is integrated and Visual Studio Code allows you to install extensions if you need something specific to your workflow. To install Visual Studio Code on Linux, I will be using Snap. If you for some reason do not have snap packages listed in your software centre, you can enable Snap support in your Linux distribution.

Enabling Snap support in Linux

I am running Linux Mint in a VM to illustrate how to use Snap. Linux Mint is a Linux distribution based on Ubuntu. If you haven’t enabled Snap support for your Linux distribution, you can do so by running the following command:

sudo apt install snapd

This will install Snap for my version of Linux. Therefore, if you are using a distribution based on Ubuntu, you can use the command above to get Snap.

What is Snap?

The quick explanation is that Snap is a universal Linux package that will work on any Linux distribution. Snaps are therefore applications compiled including all the required dependencies and libraries. This will create a sandboxed environment for your application to run in.

This means that you no longer have to worry about finding and installing the correct package (DEB, RPM etc.) for your Linux distribution. Updates are also automatic and goes out to everyone, no matter what the base OS is. Because Snaps run sandboxed, it is more secure because it is isolated from the rest of your system. Check out the website for more info regarding Snap.

Installing Snap on other Distributions

To enable support for Snap on Fedora based distributions, run the following command:

sudo dnf install snapd

Enabling support for Snap on Arch based distributions, run the following commands:

yaourt -S snapd
sudo systemctl enable --now snapd.socket

Once you have Snap installed, you need to find Visual Studio Code.

Installing Visual Studio Code on Linux using Snap

As mentioned earlier, Visual Studio Code is available as a Snap package. I will be using commands throughout to install Visual Studio Code. To find Visual Studio Code, run the following command:

sudo snap find vscode

You should see the following output.

The name of the snap package is code which means that you can use the following command to install Visual Studio Code on Linux.

sudo snap install code --classic

Depending on your Internet connection speed, this might take a few minutes to download. Once it is done, you can fire up Visual Studio Code.

This is Visual Studio Code running on my version of Linux Mint. You are of course not required to use Snap to install Visual Studio Code on Linux. You could always just download the .deb and .rpm files for your flavour of Linux.

Installing Visual Studio Code on Linux via Software Package

You can head over to the Visual Studio Code Downloads page and find the correct package for your Linux distribution. Linux distributions based on Ubuntu, such as Linux Mint that I am using requires me to download and install the .deb file. If you are using Fedora and SUSE based Linux distros, grab the .rpm file.

It is really very nice to see that Visual Studio Code is available for Apple Silicon too. As a software developer using Linux, you have everything you need to install Visual Studio Code on Linux.

Using Snap on Linux

There are various commands that you can run with Snap. In essence, Snap is similar to apt-get commands. Here is a list of some of the commands that you could find useful.

Finding Snap Packages

As we saw earlier, you can find packages on Snap by running the following command:

snap find <text_to_find>

The search query entered in the place of <text_to_find> does not need to be an exact match. The command will find similar results to the search query you entered.

Installing Snap Packages

As before, the command to install Snap packages is also quite easy. Once you have found the name of the package to install via the find command, you can install the package as follows:

sudo snap install <package_name>

The <package_name> is obviously the name of the package in the find results.

Listing Installed Snap Packages

If you want to see the installed Snap packages on your system, you can simply run:

snap list

The command return a list of packages installed as seen in the following screenshot.

As you can see, the list includes the package name, version, revision, tracking, published, and notes.

Listing Changes to Installed Snap Packages

To see any changes to Snap installed Snap packages, you can run the following command:

snap changes

This will list apps that have recently been updated, as seen in the screenshot below.

You can see that the .NET Core was refreshed automatically before Visual Studio Code was installed.

Refreshing, Updating, and Reverting Installed Snap Packages

Earlier I mentioned that Snap packages are automatically updated if there is an update available. It isn’t necessary to manually go updating Snap packages. If you wanted to you can check to see which Snap packages have updates waiting to be installed by running the following command:

sudo snap refresh --list

This will list packages with updates ready to be installed. To manually update an installed package, run the following command:

sudo snap refresh <package_name>

If you want to revert a Snap package, the following command will do the trick:

sudo snap revert <package_name>

This will revert the currently installed version to the previous version.

Deleting Snap Packages

To remove an installed Snap package, you can do the following:

sudo snap remove <package_name>

This essentially uninstalls the package from your Linux system.

Installing Visual Studio Code on Linux using Channels

The channels feature of Snap allows users to switch between stable and development releases of a package. By default, Snap packages are installed form the stable channel (which makes sense). If you are more bleeding edge, you can switch between these channels as follows:

sudo snap refresh <package_name> --channel=<channel_name>

The available channels are:

stable – this is the default channel
candidate – this is a release candidate nearing a stable release
beta – this is an unstable version of the application
edge – the daily or nightly build of an app still in development

All future updates to the application will come from the channel it was installed from.

Downloading Snap Packages

If for some reason, you need to install Snap packages offline, you can download them as follows:

snap download <package_name>

This will download the .assert and .snap file that you can stick onto a thumb drive and copy to a different Linux machine.

As you can see from the screenshot above, you need to install the downloaded package as follows:

snap ack <package_name.assert>
snap install <package_name.snap>

All these terminal commands remind me of running dotnet commands, and this is the point of this article. If you’re developing applications in .NET Core (or .NET 5.0 and later), working from a terminal window will feel very natural.

Running Installed Visual Studio Code on Linux

Last but not least, running your Snap is just as easy if you know the run command. This is usually just the name of the Snap. In our case, simply the word code will start Visual Studio Code.

And that’s all there is to it. Wasn’t that super easy?

Installing Visual Studio Code on Linux is Super Easy with Snap

If there is anything I have left out, please let me know in the comments section. I have only recently started playing around with Snap on Linux and I have to admit, it does make life easier. Being a noob, however, does leave the door open for mistakes. Learning is fun and I hope that using Snap and Visual Studio Code makes your dev workflow more productive.

The post Installing Visual Studio Code on Linux appeared first on Programming and Tech Blog.

Visual Studio 2022 Releasing this Summer

Dirk Strauss — Wed, 21 Apr 2021 15:40:53 +0000

It’s official, the first public preview of Visual Studio 2022 will be released this Summer. What is even more exciting news, is that this version of Visual Studio will be 64-bit. This means that developers will no longer be limited to ~4gb of RAM in the devenv.exe process.

Looking for Something Else? Try These Links Instead:

It is worth noting that Visual Studio 2022 will not change the types or bitness of apps that you can create. You will still be able to create 32-bit applications.

No More Out of memory Exceptions in Visual Studio 2022

In the original dev blog post, Amanda Silver (CVP of Product, Developer Division) highlighted the fact that Visual Studio 2022 will scale up to use the additional memory that’s available to a 64-bit process. The embedded video demoed a solution containing 1,600 projects and ~300k files loading in under 3 minutes.

User Interface Refresh

I know that some might cringe when they hear UI refresh. I know I did (remember the Visual Studio 2015 CAPS menu bar?). These changes, however, seem to be subtle and cosmetic. They are aimed at modernizing the UI and to reduce crowding.

Overall, we aim to reduce complexity and decrease the cognitive load so that you can focus and stay in the zone ~ Amanda Silver

Visual Studio 2022 will include:

Updated icons that are clearer, more legible, and improve contrast.
Cascadia Code, a new fixed-width font for better readability and ligature support.
Refreshed and improved product themes.
Accessibility Insights integration that detects accessibility issues earlier.

Personalization has also been made easier to allow you to get that “just right” feel for your workflow. Allowing you to customize aspects of the IDE and sync those settings across devices. This is good for developers working on multiple machines.

Visual Studio 2022 will Support .NET 6 and MAUI

Full support will be included for .NET 6 and the unified framework. This is something that I am extremely excited about. You might have heard about .NET Multi-platform App UI or .NET MAUI. This will allow cross-platform client applications on Windows, Android, macOS, and iOS.

The past couple of months, I have been playing around with Xcode and SwiftUI as well as Xamarin. While this was a lot of fun, and something I will continue doing, I must admit that MAUI is a leap forward in .NET development. What’s more, for most apps such as web, desktop, and mobile, .NET Hot Reload will allow you to apply code changes without having to restart.

Innovative Features

Debugging is a big part of your development workflow. Improvements in performance in the core debugger will make debugging less of a resource kill for those with lighter specked machines. Flame charts in the profiler will surface hot paths. Dependant breakpoints will allow you to be more precise when debugging, and integrated decompilation experiences will allow you to step through code not stored locally.

Lately I have been doing more pair programming and code reviews with a colleague of mine. Live Share will now include integrated text chat. You will also be able to schedule recurring sessions by reusing the same link. If your organization has specific policies in place with regards to Live Share, you can introduce session policies. These will define compliance requirements for collaboration, for example, should read/write terminals be shareable?

The AI IntelliCode engine also gets smarter. It will now anticipate what you want to type next and offer that as a code completion suggestion. So now typing Cons will suggest a completion for Console.WriteLine.

Working with Code gets Better

Visual Studio 2022 will now include new support for Git and GitHub with built-in logic and checkpoints to help you along the merge and review process. Improved code search features will also allow you to search outside your loaded scope. This means finding exactly what you need, irrespective of what code base or repo that code is located in.

Visual Studio for Mac

There is also some love coming to Visual Studio for Mac with Microsoft working to move this over to the native macOS UI. This will increase the performance and reliability. I do wonder if this will be supported on the new M1 Macs. An update of menus and terminology across the IDE will make Visual Studio consistent between Windows and Mac. This includes the new Git experience from Visual Studio that will be coming to Visual Studio for Mac.

Final Thoughts

Some of these features will be available after the first public release. The changes coming to Visual Studio 2022 are exciting to say the least. Keep an eye out for announcements about Preview 1 in the coming weeks and have a browse through the Developer Community feature requests.

The post Visual Studio 2022 Releasing this Summer appeared first on Programming and Tech Blog.

Visual Studio IntelliCode – AI For your Code

Dirk Strauss — Mon, 03 Jun 2019 21:21:13 +0000

Visual Studio IntelliCode allows you to add the power of artificial intelligence to your code. Enabling IntelliCode is super easy, and I’m going to show you exactly how to do this.

LOOKING FOR SOMETHING ELSE? TRY THESE LINKS INSTEAD:

If you are a bit short on time, go and check out the video explainer on this topic.

This should get you up to speed quickly enough. If you enjoy the video, please consider subscribing to the channel and giving the video a thumbs up.

Visual Studio IntelliCode Explained

IntelliCode is a super exciting addition to Visual Studio. Microsoft calls it AI-assisted development. It will save you time by putting what you are most likely to use at the top of your completion list. These are displayed as starred recommendations.

IntelliCode uses open source GitHub projects with 100 stars or more to generate recommendations for your code. IntelliCode will also build a custom model to provide recommendations from your source code. These are things such as methods from your own classes or domain specific library calls.

Note: IntelliCode features are off by default. To enable these, go to Tools > Options > IntelliCode and enable the features.

This will enable IntelliCode for your project.

Install Visual Studio IntelliCode

If you don’t have IntelliCode installed, head on over to the Extensions > Manage Extensions window to download and install it.

After downloading, you will need to restart Visual Studio in order to install IntelliCode.

Building an IntelliCode Model

In Visual Studio 2019, hit Ctrl+Q and type IntelliCode into the search window. Select IntelliCode Model Management from the results or go to View > Other Windows > IntelliCode Model Management to access the Visual Studio IntelliCode window.

From here, you can build IntelliCode models for your projects. You can see the models shared with you, share the model you just built, retrain or delete the IntelliCode model.

Can I Use it in My Code?

At the time of this post, IntelliCode works in Visual Studio 2017 (version 15.8 and up) as wella s Visual Studio 2019. It also supports the following languages:

C#
C++
XAML (In Visual Studio 2019)

IntelliCode also works in Visual Studio Code and supports:

Python
TypeScript
JavaScript
Java

Microsoft is bringing the goodness of AI to Visual Studio Code. Now that is really neat!

View Extracted Data

After you have generated your model, you can head over to the following folder:

 %TEMP%\Visual Studio IntelliCode

Here you should see a UsageOutput folder in one of the created folders. Look for a usage JSON file. This is the contents of the extracted data. Code analysis all happens client side. This data extraction is then fed into Microsoft’s Model Service which is uploaded to the service in the cloud.

It is important to note that Microsoft doesn’t receive any of your code. It only uploads data and information about your code. So your code remains on your machine.

Get the Source Code

If you want to grab a working example of the code used in this blog post, head on over to the following GitHub repo and clone the repo to your local machine.

dirkstrauss/IntelliCodeDemo

If you have any comments or suggestions, please feel free to put those in the comments section below. Give it a try, and see what IntelliCode can do for you!

The post Visual Studio IntelliCode – AI For your Code appeared first on Programming and Tech Blog.

Extension Methods Are Easy with C#

Dirk Strauss — Tue, 28 May 2019 19:25:37 +0000

I have said this many times before, I love using extension methods. They are probably the easiest methods to write and can power up your code like never before. If you what to find out more, read on.

LOOKING FOR SOMETHING ELSE? TRY THESE LINKS INSTEAD:

If you are a bit short on time, go and check out the video explainer on this topic.

This should get you up and running quickly with using extension methods in your own applications to enhance your code. If you want a little more, keep on reading.

Extension Methods Explained

If you want to add methods to existing types without having to recompile your code or without creating a new derived type, then extension methods are the way to go.

Extension methods are a special type of static method. These are then called on the type you are extending as if they were instance methods.

Have a look at the Microsoft document explaining extension methods in depth. Consider the following code listing:

public static bool ToInt(this string value)
{
    return int.TryParse(value, out var _);
}

This is a typical extension method that acts on a string type and checks to see if the string can be parsed to a valid Integer. Note that the TryParse uses an out var using a discards variable.

TIP: Introduced in C# 7.0, discards are temporary, dummy variables are intentionally unused. A discard is indicated by using the underscore (_) for its variable name.

Using Extension Methods

In order to use your extension method, you need to just call it as you would any method of that type. In our case, we are extending the String type. This is seen by the extension method signature in the previous code listing. It enables us to do the following:

var sValue = "15";
if (sValue.ToInt())
{
    // Do something
}

If the String variable can successfully be parsed to an Integer, then the extension method will return True. You can even modify the method to return the integer it parsed, instead of a Boolean. You would, of course, need to gracefully handle cases where the String value could not be parsed to an Integer.

Get the Source Code

If you want to grab a working example of the code, head on over to the following GitHub repo and clone the repo to your local machine.

dirkstrauss/ExtensionMethodsDemo

If you have any comments or suggestions, please feel free to put those in the comments section below.

The post Extension Methods Are Easy with C# appeared first on Programming and Tech Blog.

Responsive Tables – How to scale your site beautifully

Dirk Strauss — Wed, 19 Dec 2018 07:12:15 +0000

Responsive Tables provide flexibility to your site to scale well, especially when it comes to viewing tables on mobile devices. But for some websites, responsive tables are non-existent. You might wonder how an existing table on a website can be made responsive. Please note, by responsive, I do not mean horizontal scroll bars.

Looking for something else? Try these links instead:

I was looking for some information regarding responsive tables and came across Matt Smith’s article on Responsive table layouts. Let us have a look at a standard table that displays planet data.

Please note that all the sourcecode in this Visual Studio project is available on Github.

HTML Table

For this example, I will use some straightforward markup to create a table to hold planet data.

In Visual Studio I added some additional styling using Scss and when I run my web project, my table looks like this:

Not too bad hey? Well let’s have a look at how our table looks when viewed on an iPhone X.

This definitely does not look too good to me. It’s not horrible, but does not pass the grade in my opinion.

Making the planet table more responsive

To do this, I added a data-label attribute to each table data element. The data-label value is the value of each column’s name.

<td data-label="Planet">Mercury</td>

Then I added the CSS media query Matt suggested in his article. Here is the full pen including the CSS.

Have a look at this table now. It definitely looks much better than the previous layouts above.

This is really great and meets our end goal of having a table respond to a mobile device in a manner that is user-friendly and more readable to the user. There are definitely other solutions to making responsive tables, as outlined in this comprehensive list of solutions by sitepoint.

I did want to work with the Bootstrap grid system. I’m sure that doing this will result in an easier code base to work with.

Bootstrap Responsive Tables Example

I wanted to do this using only div tags. As you probably know, if you want responsive then a good choice is to use Bootstrap. Here is the CodePen for the code. Note: Just a reminder, all the source code is available on GitHub too.

Looking at this code, you will see that I have used Scss as my CSS Preprocessor. When I view the mobile version of the site, you will see that the result is quite the same as before.

Bootstrap and the media query has responded well to keep the table of data readable and responsive.

I wanted to take this one step further. If you need to create a table that is responsive and that includes filtering and a host of other functionality, have a look at Isotope.

Simple Responsive Tables Example using Isotope

Getting up to speed using Isotope is really easy. Let’s have a look at our table first. You will notice that I have added some more celestial bodies (dwarf planets) to the grid.

Each Category planet (if that is the correct terminology), is colored differently for clarity.

To add Isotope to your Web Application, you need to visit the Isotope page and download the isotope.pkgd.min.js file and add this to your site. You can also link directly to the CDN if you like.

In the screenshot below you will notice the Isotope file added to my Scripts folder. You will also notice the custom.js file I added.

Create the custom.js file

The custom.js file will contain the custom script for the Isotope grid.

var $grid;
var isoOptions;

$(function () {
    // Set the Isotope Grid Options
    isoOptions = {
        // options
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: '.col-md-4'
        }
    };

    // Initialize the Isotope Grid
    $grid = $('.grid-container').isotope(isoOptions);

    // The Filter Button Click. This will filter the Isotope Grid by the class selected
    $('.button-filter').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        currentFilter = filterValue; // Keep a variable set for the currently selected filter
        $grid.isotope({ filter: filterValue });
    });
});

Then we need to modify the BundleConfig file and add the following to it:

bundles.Add(new ScriptBundle("~/bundles/isotope").Include("~/Scripts/isotope.pkgd.min.js"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include("~/Scripts/custom.js"));

In the _Layout.cshtml view, add the following lines of code:

@Scripts.Render("~/bundles/isotope")
@Scripts.Render("~/bundles/custom")

This should be all that you need to get the Isotope grid functioning. Note, that all the code (as mentioned above) is also available on GitHub.

Running the Isotope Grid and Filter

You should end up with a grid that displays planets and dwarf planets , but in addition to this, it also includes a filter. Clicking on the Planets button will display just the planets while clicking on the Dwarf Planets button will display only dwarf planets.

View a demo of the filtering functionality on YouTube

Another bonus is that Isotope will alter the layout of your grid items to make them fit the screen size you’re using.

Note: I have not bothered rendering the filter buttons for mobile.

This responsiveness also does not affect the filter functionality. It remains fully functional and responsive throughout.

Isotope Provides much more

The Isotope package has a lot to offer developers. Have a look at the filtering options available as well as sorting and layout modes.

The post Responsive Tables – How to scale your site beautifully appeared first on Programming and Tech Blog.

Struggling With Imposter Syndrome? How To Think And Overcome

Dirk Strauss — Wed, 12 Dec 2018 07:32:12 +0000

Struggling with Imposter Syndrome

The fact is that before programmers learn how to deal with imposter syndrome, they need to know how to identify it. All too often I have heard programmers say that they would never be able to work with a specific technology.

Imposter Syndrome - How to Overcome It

You feel that having your work peer reviewed will expose your lack of knowledge. Developers getting stuck in a rut is usually the result of not moving forward for fear of putting yourself out there. They never attempt to learn something new. Some programmers never move outside their comfort zone. It is for these reasons that struggling with imposter syndrome is a very real thing. Some signs that you might be struggling with imposter syndrome are:

You are afraid that people important to you will see you as incapable?
Do you struggle to accept compliments or praise?
Does it feel like your success is due to luck?

There is however a way for professionals in dealing with imposter syndrome.

You need a different perspective

The raw deal with imposter syndrome is that it makes you feel isolated and excluded. In reality though, everyone has a hand in what you know. The flip side is also true, you have a hand in what everyone else knows too. Think about that for a minute. There is an overlap of knowledge between developers.

This is the first and most important step in learning how to deal with imposter syndrome. Once you realize this, you can move past how you feel and replace that with passion.

Everything around you that you call life, was made up by people that were no smarter than you. And you can change it. You can influence it. – Steve Jobs

Start by moulding your perception of life. As it happens, you are the architect of your own destiny. It is within your reach to create the career that you want to have. All you have to do, is realize that you can.

Living life with passion

I’m not saying that programmers that are struggling with imposter syndrome have a lack of passion. I’m saying that imposter syndrome is getting in the way of you living passionately.

There is a different breed of person that can be found in the lonely hours of the night, faces illuminated by the glow of a computer screen, vamping on technology. This breed belongs to a passionate few that consider their trade as more of an artform, than work. The fact that you are reading this article, tells me that these passionate few include you.

Chrome Dev Tools – More Advanced Tips for Better Debugging

Dirk Strauss — Wed, 12 Dec 2018 06:46:58 +0000

Chrome Dev Tools – There are a few advanced debugging tips in the Chrome Browser for Web Developers that provide incredible valuable. In the previous article, we looked at some basic debugging tips that you should know. In this article, we will delve a little deeper and see what else is available to web developers in Chrome Dev Tools (this is an affiliate link).

Chrome Dev Tools makes debugging easy

Chrome Dev Tools are a collection of web developer tools that are built directly into the Chrome Browser. You are able to make changes on the fly without recompiling your code. You can also debug and resolve issues quicker. This helps web developers build sites faster and create more stable web applications that scale across different devices properly.

Looking for something else? Try these links instead:

Combine this with Sass CSS and you are able to style you web application easily by targeting specific breakpoints. Breakpoints are the points where your site’s content will be responsive to a specific device it’s being viewed on. The layout is then changed to provide the user with the best viewing experience possible.

Making code look pretty

Sometimes you need to gain a bit more clarity when viewing a file in the Inspector. This is especially true for script files. Luckily you can click on the curly braces and Chrome Dev Tools will open a new file with the formatted code. In the screenshot above, you can see that I am viewing a script in the Sources tab.

Throttling for slow 3G

Some times you need to be cognisant of the fact that some of your users will need to access your site when they do not have a fast connection. Chrome Dev Tools allows web developers to throttle their web applications to mimic slow network speeds.

On the Network tab, click on the Online dropdown and select one of the presets or add a custom Network Throttling Profile.

Adding breakpoints to scripts

If you need to debug one of your scripts, Chrome Dev Tools allows you to do this via the Sources tab. Select the script in the page tree to the left and click on the line number that you want to add a breakpoint to.

The next time your script is run, the code will stop at the breakpoint you set.

To navigate your script, you can click on the step controls. These are:

Resume script execution
Skip the next function call
Step into the next function call
Jump out of the current function
Step

You can also Deactivate breakpoints and Pause on exceptions if required.

Event Listener Breakpoints

Another nice feature in Chrome Dev Tools is the Event Listener Breakpoints window. This allows you to pause the code execution when a specific event listener executes.

In the Sources tab, click on the Event Listener Breakpoints window and expand the events. You can then check the event you want to break for. When that event listener executes, Chrome Dev Tools will pause allowing you to inspect the code.

Adding Expressions

The Watch window in Chrome Dev Tools allows web developers to add expressions. These are then added to the Watch window. You can see the values of variables currently in scope from the Scope window.

Log to the Console Window

Chrome Dev Tools allows web developers to log information to the Console window. If you add console.log to your script, that information will be output to the Console window.

You can access the Console window from the Console tab or as a drawer that is displayed next to any of the other windows. To open it as a dedicated Console panel, press Ctrl+Shift+J or Cmd+Opt+J on Mac.

Save your Console Output

If you need to save the output of your Console window, Chrome Dev Tools allows you to do this by right-clicking and selecting Save as… fromt eh context menu.

Preserve Console History

Chrome Dev Tools allows web developers to preserve the Console History between page refreshes. This option is not on by default. To enable it, click on the settings icon. Then check the Preserve log checkbox.

Messages output to the Console window will be preserved until you clear the Consol or close the tab.

Testing a Code Fix

If you have found a bug in your script, you can edit the code right from inside Chrome Dev Tools. You don’t need to leave Chrome Dev Tools UI to change the script code.

If your code is currently paused at a breakpoint, click on the Resume script execution button. Then add or edit the script as needed. You will notice that I just added a console.log to output the word Hello. Also notice that the file is marked as modified.

To save your changes, press Ctrl+S on Windows or Command+S on Mac. Note that changes to this file are not saved to the file system. When you run the script again, the change I made is displayed in the Console window.

Audit Website Speed

Chrome Dev Tools allows you to audit your website speed. It is recommended you browse your web page in Incognito mode. To run your page with Incognito mode in Visual Studio, check out Scott Hanselman’s article on enabling this in Visual Studio.

To start the audit, click on the Audits tab. You can then set several options for your audit. You can select to audit the Mobile version or Desktop version of your site.

The Audits option allows you to select which categories of audits to run. Because I am only interested in the performance of the site, I only selected the Performance option.

You can also throttle the page based on specific mobile device connections. Lastly, the Clear storage option allows you to delete all storage before loading your web page. This is similar to a visitor viewing your page for the first time. To audit repeat visitors, uncheck the Clear storage option.

Running your Audit

When you are ready, click on the Run audits button.

Because we used simulated throttling, Chrome Dev Tools now extrapolates the time your page would load on a mobile device based on how long it would take on a desktop. It isn’t actually throttling your CPU or network.

When the audit report loads, it displays your performance baseline. Your performance score is shown at the top of the report. The higher this number, the better. It also displays various metrics for your site.

You can hover over a metric to learn more about it and to access the documentation for the specific metric.

Lower down in the Opportunities section, the report displays some tips to improve the performance of your site. The Diagnostics section displays more detailed information on exactly what happened.

Chrome Dev Tools Audits can give you valuable insights as to the performance and bottlenecks of your site. There is a lot more to learn here. Check out the excellent support article on Google’s Tools for Web Developers site.

Simulate Mobile Devices

If you need to check the responsive layout of your site across different devices, you can let Chrome Dev Tools simulate specific mobile devices. To do this, click on the Toggle device toolbar icon in the top left corner. You can also press Ctrl+Shift+M.

Your browser window will now change the layout of your site as if it was being viewed on a different device. In this case I selected the iPhone X, but you can select several other devices from the dropdown.

To cater for different breakpoints, you need to target these in your stylesheets. I use Sass CSS to easily target different mobile breakpoints in my stylesheets.

Wrapping up

Chrome Dev Tools provide web developers a rich set of debugging tools that enable you to fine tune your web application. There is a lot more you can do in the tools (more than I can cover in a single article). Have a look at the documentation Google provides to learn more.

The post Chrome Dev Tools – More Advanced Tips for Better Debugging appeared first on Programming and Tech Blog.

Chrome Developer Tools – Easy Web Debugging You Need to Know

Dirk Strauss — Wed, 05 Dec 2018 06:38:25 +0000

Chrome Developer Tools – As a web developer, one tool that is invaluable is the Chrome Developer Tools. It is a feature rich set of tools that you can use directly from your Chrome Browser. In this article, I will have a look at four Chrome Developer Tools in particular.

Chrome Developer Tools

Creating web applications pose specific challenges for developers. It isn’t always possible to stick to pure C# debugging in Visual Studio, especially when you are creating a responsive UI. The project below uses SASS that compiles to CSS. To open the Chrome Developer Tools, you obviously need to be using Chrome as your browser. Right click anywhere on your web page (or on an element) and select the Inspect menu option in your context menu. You can also hold down Ctrl+Shift+I. You can download the code from my GitHub repository if you want to follow along.

Looking for something else? Try these links instead:

1. Drag and Drop Elements

Did you know that you can select specific elements on your web page and drag them around to see what they look like in different positions on the web page you are creating? Simply click and hold the element and drag it to a new position.

This is really great if you want to move things around a bit without having to go back to Visual Studio and changing the markup there. As a side note, if you have not looked at what SASS has to offer, I encourage you to do so. It has really changed my life (I know it sounds really geeky) and now I can’t imagine working without SASS.

2. Adding CSS

Another nice trick is to add CSS to your elements right in the inspector. Chrome Developer Tools makes this really easy by allowing you to select your element and click on the plus icon. You can then add a specific CSS property to your element.

This allows you to get a feel for what your element will look like if you add specific CSS properties to it.

3. Adding a Class

In my project, I have a new class called redButton. All it does is sets the background color to red. To see how an element is affected when applying the class to it, select the element and click on the .cls toggle. As you type, the class is found and when you hit Enter , the class is applied. This will style the element immediately. Furthermore, you can then hover over the class name added in the Styles window, hold down Ctrl+Click and go to the file that contains the class you added. Hovering over the tab will show you the location of the file in your project.

If you need to make changes to the class, you can use this method to easily find the containing file.

4. Triggering State

A particular tricky thing to do is mimic states. Chrome Developer Tools allows you to trigger the state of an element. In this example we are triggering the hover state of a button. We can then change the CSS as needed to see what effect the changes have on the hover state (for example) .

You can easily modify element states without having to blindly change the CSS and hope that it is applied correctly.

Wrapping up

Chrome Developer Tools give web developers a host of options for debugging the UI. When you use these these tools in conjunction with each other, you can easily change elements styles on the fly.

For mre on this topic, check out my second article on Chrome Developer Tools that goes a little more in depth.

The post Chrome Developer Tools – Easy Web Debugging You Need to Know appeared first on Programming and Tech Blog.

Sass CSS – This Awesome Extension Will Make You Sassy

Dirk Strauss — Tue, 04 Dec 2018 06:58:18 +0000

Sass CSS – If you develop web applications and you have not heard about Sass, then today is your lucky day. To quote a note from the Sass website, it is the most mature, stable and powerful professional grade CSS extension language in the world.

Sass CSS

If you have ever had to work with CSS, you will love Sass. It is a feature rich CSS extension language. Sass CSS is also completely compatible with all CSS versions. It has actively been supported for many years and it is safe to say that it is widely adopted. What Sass will do is enable you to write CSS using Sass and have it compile into CSS when you save. You can also create a minified CSS file.

Looking for something else? Try these links instead:

Adding to Visual Studio

If you are creating web applications in Visual Studio, you need to do the following to add Sass CSS to your project. Below you will see that I have a normal MVC web application. I am going to add Sass CSS to this project.

Create a folder in your project called scss. This is where you are going to add all your scss files.

Right-click on the folder and add a new item. You might also see SCSS Style Sheet (SASS) as an option in the context menu.

Add the scss file and call it custom.scss. You can name it anything you like, just be sure to carry that through when looking at the examples in this article.

Adding the Web Compiler

We need to be able to compile the Sass CSS file into a CSS file. To do this, in Visual Studio from the Tools menu click on Extensions and Updates. Perform a search for Web Compiler created by Mads Kristensen and install that.

You can now compile the Sass CSS file by right-clicking it and selecting Web Compiler and then clicking on Compile file.

You will see that the compiler creates a compilerconfig.json file as well as a custom.css and custom.min.css file. That is great, but I don’t want to have my CSS files output to the same location as my Sass CSS file. Let’s change that behavior.

Changing the CSS File Output Location

Open the compilerconfig.json file. You will notice that it contains the input location and output location of your files.

Modify the outputFile path to the Content folder. For the purposes of this article I will stick with the Content folder, but you can change the path to wherever you are storing your web application’s CSS files. You can also name your output CSS file whatever you like. I have just kept mine custom.css.

When you save your compilerconfig.json file, you will notice that the Web Compiler does a build again and the CSS file is output to the path that you specified. You will also notice that the Web Compiler has created the minified CSS file for you too. You can now delete the CSS files created earlier in the Sass CSS folder.

Using the Sass CSS FIle

Open up the custom.scss file and delete the contents. Add a new class called .redButton and set the background color to red.

Next, head on over to your Index.cshtml View and add the redButton class to an element on your page. I added the class to a button on my page.

Swing back to the App_Start folder and locate the BundleConfig.cs file. Add the custom.css file to the StyleBundle class.

Build your Web Application and run it. You will see that the familliar Jumbotron button is styled red instead of its default blue.

Wrapping up

Sass CSS is a fantastic way to create custom CSS styles for your web application. There is a lot more to show you, so stick around. There will be more articles on Sass CSS in the coming weeks.

The post Sass CSS – This Awesome Extension Will Make You Sassy appeared first on Programming and Tech Blog.