Here are 10 web developer tips and tricks I learned at Codegarden 2018

1. responsivebreakpoints.com

Credit: Vitaly Friedman

The algorithmic concept is to find image width values that offer a significant reduction in file size. Images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions, and enables developers to easily create 'picture' and 'img' HTML5 elements based on the calculated breakpoints.

2. Image contrast trick

Credit: Vitaly Friedman

Remove contrast from an image before saving it to your file system. Then when you serve it, apply the contrast using CSS. You can't tell the difference and it saves a lot of disk space and bandwidth.

3. Image pixels and quality trick

Credit: Vitaly Friedman

Increase the pixel size to double the pixels needed and save it with 0% quality, then display it at half the size. The result is a smaller image on disk and the difference on the screen is not noticeable.

4. letsenhance.io

Credit: Vitaly Friedman

This service uses artificial intelligence to upscale low quality images and make them high quality.

Here is an example of it in use:

Before

Before

After

After

5. font-display trick

Credit: Vitaly Friedman

Prevent your page from flashing the text when the fonts load, or showing nothing at all until they do. Be in charge of what happens with fonts on your page
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

6. ipneighbour.com

Credit: Jeffrey Shoemaker

See what other sites are on the same server as you. This is used by hackers, if they can't hack you through your site, they can get you through your neighbouring sites.

7. SQL Data Security tip 1

Credit: Jeffrey Shoemaker

Transparent Data Encryption (TDE) only encrypts the files and backups, not the values in the tables.

8. SQL Data Security tip 2

Credit: Jeffrey Shoemaker

To encrypt the values in the columns, you can right click on the table and choose encrypt columns, but it doesn't work for TEXT and NTEXT columns.

9. Use Smidge instead of Client Dependency

Credit: Shannon Diminick

I was talking to Shannon Diminick about Client Dependency and he said, "that's old, you should be using Smidge". Apparently it does a better job than Client Dependency plus more features.

10. Models Builder API

Credit: Nik

Use the Models Builder API with the Models Builder Custom Tool. It allows you to have your models in a separate library, instead of in the web project. The get generated as partial classes so you can added other properties to these models in a separate partial class file. I'll do a video on this when I get chance.

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

I'm now an Umbraco MVP

I am so honoured to be made an Umbraco MVP. This award was given to me for my contributions to the U…

Read Post

What is Visual Studio Live Share and how do you use it?

This post shows you how to get set up to start using Visual Studio Live Share for remote pair progra…

Read Post

How to keep your fork up to date with the master repository in GitHub

This post gives you the commands you will need to keep your fork up to date with the master reposito…

Read Post

How I doubled the traffic to my website in 4 simple steps

In the space of 2 months, I doubled the traffic on my website, and the increase was all Organic traf…

Read Post