Semantic CSS

Semantic CSS says that class names should describe an element rather than specify it. While we can’t and shouldn’t always use semantic class names, ie: when using CSS grids or similar concepts, in general it’s a good concept to strive for.

I will illustrate why semantic class names are a good thing with a simple example I recently encountered.

Good CSS classes are descriptive of the element itself and not the visual effect of the class. I recently modified some code that contained classes like w-80 (for width 80% !important) or ml-3 (for margin-left 3.0em). This made for things like:

<input class=”change-email-input” name=”email”>

A better way would have been to put the width 80% in the existing change-email-input class or to put in a new class like form-field. form-field describe what the element is, a form field, not what it should look like, width 80%.

I was asked to make some changes to this site to make it more responsive. At lower screen sizes it didn’t make sense to have this field at 80% width.

It would have been possible to add a @media query to change w-80 to another value, say 50%, but that would be really counter-intuitive. Removing the w-80 class to add a w-50 would necessitate manipulating the HTML or templates even though this could be easily avoided.

If the CSS class would have been called form-field making a media query to change it’s size would have been much less awkward. It also opens other options like adding a small-form-field to the element when on mobile while keeping the previous class.

Like in many other areas of programming, it’s a good idea to separate concerns and let the CSS files contain the style information while keeping the HTML files as declarative as possible by using semantic class names.

Here is a good article that goes over the concept of semantic class names in more detail: https://css-tricks.com/semantic-class-names/.

Preventing multiple calls on button in Angular

If you wish to prevent your users from clicking on a button multiple times in a row, for example if the button triggers some animation that needs to complete before being triggered again, you can use debouncing.

Debouncing is a form of rate limiting in which a function isn’t called until it hasn’t been called again for a certain amount of time. That is to say, if the debouncing time is 200ms, as long as you keep calling the function and those calls are within a 200ms window of each other, the function won’t get called.

You could use a button’s [disabled] attribute and setTimeout, but I have ran in some cases where this interfered with the ongoing animation of the first call.

Here is how to use RxJs with Angular to implement debouncing.

In your template just bind a function to an event like you would normally:

(click)="doStuff()"

In your component use the following code:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';

// ...
// ...
export class SomeComponent {
    private buttonClicked = new Subject();

    constructor() {
        const btnClickedObs = this.nextClicked
                                  .asObservable()
                                  .debounceTime(200);
        btnClickedObs.subscribe(() => 
                      this.functionToCall()
                      );
    }

    doStuff() {
        this.buttonClicked.next();
    }
}

Debouncing is similar to throttling. With throttling you limit the number of calls to 1 per time frame of unit so the first call happens automatically. If the user keeps mashing the button continuously, throttled calls will be made at a rate of 1 per throttleTime whereas with debouncing only one call will be made. Which one you want depends on your particular scenario.

You can mix both, but you must apply the debouncing before the throttling and the throttlingTime must be at least twice the debouncingTime. Otherwise one of them will have no effect.

Remove Hot Network Questions from StackOverflow

While I’m at work, I try to keep distractions at a minimum so I can concentrate on my work.

Like many .Net developers I tend to use StackOverflow a lot but one thing that gets the better of my curiosity is the Hot Network Questions tab on StackOverflow. I’ve clicked on non work related questions fare more time than I’d care to admit. To remedy this, on my workplace computer, I’ve made the HNQ tab go away.

hnq.PNG

Using the Grease Monkey Firefox add-on it’s possible to create JavaScript scripts, to modify the pages you surf.

I wrote a small script to make the entire thing go away on both StackOverFlow and SoftwareEngineering :

// ==UserScript==
// @name        HNQ Hider
// @description Hides the Stackexchange HNQ

// @include /^https?:\/\/(.*\.)?stackoverflow\.com/.*$/
// @include /^https?:\/\/(.*\.)?softwareengineering.stackexchange.com/.*$/

// @version     1
// @grant       none

// ==/UserScript==

document.getElementById('hot-network-questions').outerHTML='';

 

Integrating DropzoneJS into an ASP.NET MVC site

Dropzone allows you to easily handle file upload via drag and drop.

Here is a simple tutorial on how to integrate DropzoneJS into an existing ASP.NET MVC application. The instructions on the dropzone page are easy to follow but I include here a version tailored for ASP.NET MVC.

First off, there is a NuGet package but I prefer not to use it so that I can include only the necessary files and choose where those files are located.

The first step is to obtain the JavaScript file and include it into your /Scripts folder.

dropzone1

Optionally you can also download and use the CSS file. Put this one in your /Content folder.

dropzone2

Once these files are in place, it’s time to create some bundles. In App_Start/BundleConfig.cs add the following bundles:

bundles.Add(new ScriptBundle("~/bundles/dropzone")
            .Include("~/Scripts/dropzone.js"));

bundles.Add(new StyleBundle("~/Content/dropzone-css")
            .Include("~/Content/dropzone.css"));

On the page you want to use dropzone on, add calls to the Styles and Scripts render methods and also a form element with the dropzone class. The class name is how dropzone locates the control so it can make the appropriate modifications.

Remember that you can’t nest form elements so if your page already contains another form your will need to make sure they aren’t nested.

Here is how our page.cshtml:

@Styles.Render("~/Content/dropzone-css")

<div class="jumbotron">
    <h1>dropzone test</h1>
</div>

<div class="row">
    @using (Html.BeginForm("FileUpload", "Home", 
                           FormMethod.Post,
                           new
                           {
                               @class = "dropzone",
                               id = "dropzone-form",
                           }))
    {
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    }
</div>

@section scripts {
    @Scripts.Render("~/bundles/dropzone")

    <script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            paramName: "file",
            maxFilesize: 20,
            maxFiles: 4,
            acceptedFiles: "image/*",
            dictMaxFilesExceeded: "Custom max files msg",
        };
    </script>
}

The form contains an optional fallback element for clients who don’t support JavaScript. Also note in the scripts section, custom configuration options are declared.

You may notice I have set a maxFilesize. This value is in MB. It is necessary to change the maxRequestLength attribute in your web.config file to a value at least as big as maxFilesize, otherwise IIS will reject files under the maxFilesize limit.

Here is how to change your maxRequestLength:

<system.web>
    <compilation debug="true" targetFramework="4.5.2" />
    <!--maxRequestLength increased to 20 MB-->
    <httpRuntime targetFramework="4.5.2" 
                 maxRequestLength="20480" />
</system.web>

After we have updated our web.config we can now move on to the controller.

[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file)
{
    try
    {
        var memStream = new MemoryStream();
        file.InputStream.CopyTo(memStream);

        byte[] fileData = memStream.ToArray();

        //save file to database using fictitious repository
        var repo = new FictitiousRepository();
        repo.SaveFile(file.FileName, fileData);
    }
    catch (Exception exception)
    {
        return Json(new { success = false, 
                          response = exception.Message });
    }

    return Json(new { success = true, 
                      response = "File uploaded." });
}

When uploading multiple files at the same time, this method will get called as many times as there are files.

If you want to handle the returned JSON, you need to handle events from dropzone, in this case the complete event.

Here is how the page looks after having uploaded two pictures:

dropzone3