HowTo: Copy effective-computed CSS style for specific HTML paragraph

I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).

Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).

Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.

Screenshot 2016-01-25 13.41.19

If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).

image

So, this is the copied Computed CSS style for that paragraph:

border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:

color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;

Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:

p {

/* … */

}

and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:

image

For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:

The margin property is a shorthand property for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.

Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).

So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):

p {

   color: #333;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;

}

Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):

image

One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:

image

Fix: Windows Phone update error 80072f8f

I was setting up a new Lumia phone (with Windows Phone 8.1) and neither phone update, nor the (Here) maps downloads were working. When trying Settings / Phone Update, it was showing error 80072f8f and was pointing to http://www.windowsphone.com/en-us/how-to/wp8/basics/solutions-to-update-issues to read more info. However that error code wasn’t listed there. Wonder if there is any page listing all the possible error codes. I find it silly if they have error codes that aren’t documented anywhere officially.

I looked it up on Google (sorry Bing!) and found http://www.techanges.com/fix-windows-phone-error-80072f8f/, which was saying this was related to time/date discrepancy between the phone and the windows update server. Obviously the maps also get their updates via the same system, although the maps update was showing the misleading message that it couldn’t connect to the maps library at that moment.

Although I had set correct timezone, it had wrong date/time, it was set to autoupdate date/time, but forgot that it had no SIM card in it yet. Obviously it doesn’t get these updates from a time server, but from the mobile phone connection provider. Hope Windows 10 phone fixes that and gets the date/time from time server like the one from NIST or from Microsoft that Windows uses on the desktop.

Suggestion: If and while etc. clauses should accept bool? in C#

At TrackingCam app (http://TrackingCam.codeplex.com) I have the following WPF code, where cbTrackingPresenter is a CheckBox control defined in my MainWindow’s XAML:

private void cbTrackingPresenter_Checked(object sender, RoutedEventArgs e)
{
      if (cbTrackingPresenter.IsChecked == true)
          StartTrackingPresenter();
      else
          StopTrackingPresenter();
}

Note the (redundant in my opinion) == true pattern used there. If the == true is omitted, you get the compile-time error "CS0266", with message "Cannot implicitly convert type ‘bool?’ to ‘bool’. An explicit conversion exists (are you missing a cast?)"

Why not make the "if" clause (and "while" and any clause accepts a boolean/condition) more clever and have it accept bool? too? It would only fire the condition if the value is "true" (not if it is false or null) in that case.

You can vote for this suggestion at:

http://visualstudio.uservoice.com/forums/121579-visual-studio-2015/suggestions/11038227-if-should-accept-bool

Suggestion: Add Fullscreen and Pin buttons on Titlebar of Windows

Here are some suggestions I’ve sent via Windows Insider feedback app for Windows 10:

1) Add the Fullscreen button to titlebar of ALL windows, not just the ones of Windows 8.1 Store apps. UWP (Universal Windows Platform) apps don’t seem to show zoom button on their titlebar (to make it and any borders autodisappear and take up the whole screenspace) – this is very inconsistent and limiting compared to Win8.1 Store apps.

2) Add a Pin button next to zoom/minimize/restore/close buttons on titlebar of a window to make the window stay on top. User should be able to click a pinned window to bring it to front if there are several ones pinned to top. Currently some tools apps (e.g. task manager) have such functionality, but it is in their menus. It would be handy if all apps had this.
 
Take care though that any windows that are children (modal or not) of a pinned window also appear on top (pinned) and not behind the app. So a user should be able to pin a child window independently, but when a window is pinned, all its child windows should become pinned with the pin button disabled on them till the parent window is unpinned, or instead better make the pin of the child window be linked to the pin of the parent so that the user can pin/unpin the parent and all child windows from the titlebar pin of anyone of them.

An issue may occur with some programs like TeamViewer that add an extra button on the titlebar of Windows, but they could easily fix their code to see what other buttons there are on the titlebar to not overlap with them (or some compatibility code of Windows could move such buttons a bit more to not overlap in the case of legacy software that has an issue when more buttons than they expect are on the titlebar)

Categories: Posts Tags: , , , ,

HowTo: show inner exception message if available, else outer one

Sometimes when you catch an exception in .NET, the message it prints out isn’t very informative, since it is wrapping another exception that had been thrown a bit inner in the code. That exception is in that case accessible via InnerException of the Exception instance.

That inner exception is also an Exception, so one would like to use its Message instead of the outer exception’s one, if an inner exception exists and, only if an inner exception doesn’t exist use the caught exception’s message. Here’s a clean-looking pattern I’ve coined up to achieve this while working on the TrackingCam application:

try

{

  //…

}

catch (Exception e)

{

  MessageBox.Show((e.InnerException ?? e).Message);

}

the ?? operator returns e.InnerException if it is not null, else falls back to returning e. Those two results are both of type Exception, so you can use Message on them, by putting the ?? operator’s expression in parentheses.

Suggestion: C# static extension methods invokable on class type too

it would be nice if C# supported syntax like:

public static DependencyProperty Register(static DependencyProperty x, string name, Type propertyType, Type ownerType, FrameworkPropertyMetadata typeMetadata)

that is static extension methods for classes, that can be invoked without a class instance (just with the class type), apart from normal extension methods that can be invoked on a class instance.

Then for example I could use it in Silverlight to add to its DependencyProperty class some extra WPF syntax that it currently misses, in order to increase code portability. It would wrap Dr.WPF’s implementation of value coercion for Silverlight’s DependencyProperty. I have the related code at my Compatibility library (http://Compatibility.codeplex.com) and respective NuGet package (http://nuget.org/packages/Compatibility), but the syntactic sugar is missing to achieve source code portability (via WPF and Silverlight projects that include common files via file links) without changes.

Note the "static DependencyProperty" parameter instead of the "this DependencyProperty" one that is used in C# extension methods (or else instead of static maybe they could use other keyword like type or typeof there, but I feel static is more appropriate).

Related discussion:

http://stackoverflow.com/questions/866921/static-extension-methods

http://stackoverflow.com/questions/249222/can-i-add-extension-methods-to-an-existing-static-class

Also see https://visualstudio.uservoice.com/forums/121579-visual-studio-2015/suggestions/2060313-c-support-static-extension-methods-like-f where somebody mentions "static extension properties" apart from "extension properties". Indeed it is natural that if static extension methods are to be allowed in the future, static extension properties should be added too (to extend a type with [attached] static properties)

You can vote for a related suggestion here:

https://visualstudio.uservoice.com/forums/121579-visual-studio-2015/suggestions/2060313-c-support-static-extension-methods-like-f

HowTo: Pause and Resume Speech Recognition with Microsoft engines

At SpeechTurtle application, I’ve just added speech feedback (voicing of a command) when an available command is executed using a mouse click on its name.

That could also help the user learn the expected pronunciation in English in case the speech recognition engine doesn’t understand some of the commands as voiced by the user. One can assume most of what the Speech Synthesis engine outputs to be recognizable by the Speech Recognition engine.

An issue with this approach though, is that the Speech Recognition can be fired accidentally by the speech synthesis commands, if the speech recognition engine doesn’t handle this case automatically, ignoring synthesized speech that is being generated in parallel by the speech engine.

In fact this can also be a security issue, with a malicious agent delivering voice commands to your system via some audio or video file/stream they lure you into listening/watching, or some web page they lure you into visiting (even if a webpage is not malicious, it might have been served and hosting a malicious ad by an ad network).

So, we need some way to pause the speech recognition while speaking, to avoid misfiring of recognition, since from my experience, the speech synthesis and recognition engines from .NET’s System.Speech namespace on recent Windows versions (tried with Windows 10) do have this issue.

In SpeechLib (that SpeechTurtle uses via the SpeechLib NuGet package), I’ve added commands Pause and Resume to the ISpeechRecognition interface (defined in SpeechLib.Models project and respective NuGet package and implemented at SpeechLib.Recognition and SpeechLib.Recognition.KinectV1 projects and NuGet packages).

So, in SpeechTurtle, I can do:

public void SpeakCommand(string command)
{   
  speechRecognition.Pause(); //pause the speech recognizer
  speechSynthesis.Speak(command);   
  speechRecognition.Resume();
}

Note the pattern used in SpeechRecognition.cs to retry 10 times to pause the speech recognition engine, since errors are thrown if one tries to Stop it or Set its audio input to none while it is trying to perform some recognition.

public void Pause()
{   
  for (int i=0; i<10; i++) //(re)try 10 times
  //(since we wait 100 ms at failure below before retrying, max wait is 1000ms=1sec)
    try
    {       
      SetInputToNone();
      return; //exit retry loop if succeeded
    }
  catch //catch and ignore any error saying that recognition is currently running
    {       
      Thread.Sleep(100); //retry in 100ms
    }
}

Update 1:

After more testing, it seems the above approach with the loop and try/catch won’t work

if one uses the async versions of Speech Recognition methods, since the exceptions are thrown from another thread. In that case one need to add a global exception handler.

Update 2:

After lots of trial and error, I ended up with this working pattern for Pause and Resume in SpeechLib’s SpeechRecognition.cs (note that paused is a bool(ean) field of that class, defaulting to false and PAUSE_LOOP_SLEEP is a const(ant) int(eger) set to 10 (msec):

public void Pause()
{   
  paused = true;
  speechRecognitionEngine.RequestRecognizerUpdate();
}
 
public void Resume()
{   
  paused = false;
}

At the constructor of that SpeechRecognition class I do:

  speechRecognitionEngine.RecognizerUpdateReached +=
(s, e) => {
while (paused) Thread
.Sleep(PAUSE_LOOP_SLEEP); };

I do a loop at RecognizerUpdateReached event handler to make sure the Speech Recognition

thread is waiting for the pause field to change value back to false. That event occurs after the call to RequestRecognizerUpdate in Pause method (which is done after first setting paused=true there).

Follow

Get every new post delivered to your Inbox.

Join 1,497 other followers

%d bloggers like this: