Category Archives: Asides

Thoughts on learning to become a web developer

I was recently asked by a friend for advice on a career change; he wants to get into web development and wasn’t quite sure the best place to start.

Requirements

  • Where do I start??
  • How do I decide between being a front end or back end developer?
  • Attend a course with an instructor or self-learning online?

My thoughts on learning to become a developer

Instructor-led courses or workshops are great for intense, short, periods of studying, where you can ask questions to get explanations for things you may not have understood. I sometimes teach via frameworktraining.co.uk and love how I can focus on whatever areas the attendees want me to; I’ve previously taught an Advanced MVC5 course, but it morphed into an Advanced MVC5/6 course with a focus on security.

I would suggest starting with Pluralsight – you get a free trial of something like 10 days or 200 minutes’ worth, then if you stick with it you pay either $30 or $50 a month for unlimited access to the excellent training videos (and coursework if you pay the $50); I use this all the time to seriously cram before I train a course – usually watching it at double speed!

Pluralsight is extremely well respected as a learning resource for all levels of ability. There are fantastic beginner courses – and even courses for teaching kids to program! I’d suggest checking out the Learning to Program Part 1 and 2 by Scott Allen – his stuff is usually great.

Personally I prefer to use pluralsight to an in-person course, but that’s just how I best learn. You may be different and want to get some in-person help as well.

Check out egghead.io for angularjs (popular javascript framework) videos; again, some free, some paid.

As for Back End vs Front End; just learn the basic concepts, then work out what you prefer.

So. How does that sound to you? Any suggestions?

Thoughts on current (early 2015) options for a cheap, family, desktop computer

I was recently asked by a friend for advice on buying a reasonably priced family computer; I’m sharing my opinions and asking for your thoughts.

Requirements

  • kids homework (project research and documentation),
  • kids learning to type and use a computer,
  • some gaming (minecraft & sims!),
  • Skype,
  • email,
  • affordable

My Response

If Mac, then something like this Mac Mini would be good (~ £470, but you’d also need mouse, and keyboard, so maybe £520ish or more):


Mac Mini

http://www.amazon.co.uk/computers/dp/B005EMLPR6/

If Windows, then I’d recommend something like this Acer Aspire; also tiny, less expense (~ £350), comes with everything except screen:


Acer Aspire

http://www.amazon.co.uk/Acer-Desktop-Pentium-Integrated-Graphics/dp/B00JFZP09C/

If your budget is tighter than that Aspire there are similar ones around, plus refurbished Windows PCs are way cheaper. To keep up with changing requirements of software the specifications are reasonably good, so you could go down a notch (i.e., less RAM, slower CPU, smaller hard drive), but then it would become annoyingly slow that much sooner.

The specs to look for when shopping around for a PC:

So. How does that sound to you? Any suggestions?

XML RPC Vulnerability

Looks like this poor little blog was victim of a recent spate of WordPress hack attacks, using the xmlrpc.php file (used for implementing access to the wordpress functionality from remote clients). My Apache logs are freakin stuffed with tens of thousands of POSTs to this url, which apparently can cause the server to bork.

.htaccess updated to block it, plus the feature is now disabled. And WordPress updated. Let’s see how we go now..

nuget: cannot prompt for input in non-interactive mode

If you’ve ever seen this annoying error in your various build server logs, or even when running msbuild locally from the command line, you’re probably getting annoyed.

There are a few solutions (such as including the user credentials in plain text in a config file – eep!) but this is one which I’ve used when I really get stuck.

Ensure you’re logged in as the user which will be running the builds (if not yourself), and update the nuget source reference (which will be in a user-specific appdata config file) with the password:

nuget sources update -Name <whatever you called it> -source http://your.nuget.repo/authed/feed/ -User <your username> -pass <your pwd>

This will save an encrypted password in a user-specific config file on that computer, and should mean you don’t get prompted for that source anymore.

Several more options are detailed over here: http://www.xavierdecoster.com/nuget-package-restore-from-a-secured-feed

Android browsers, keyboards, and media queries

If you have a site that is intended to be mobile friendly, is reasonably responsive (in a media-query-stylee) and has user input areas, you may find this issue on Android due to how the keyboard interacts with the screen:

Nice text input area

portrait_text_entry

Oh noes! Screen gone wrong!

confused_orientation_text_entry

It turns out that on Android devices the keyboard doesn’t overlay the screen, but actually resizes the screen; this can cause your media queries to kick in, especially if you use “orientation”:

[css]
(orientation : landscape)
[/css]

[css]
(orientation : portrait)
[/css]

To fix this, try changing your orientation checks to aspect ratio checks instead:

swap
[css](orientation : landscape)[/css]
for
[css] (min-aspect-ratio: 13/9) [/css]

and
[css](orientation : portrait)[/css]
for
[css](max-aspect-ratio: 13/9)[/css]

Ahhh – success!

corrected_text_entry

Reference http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

Mobile website input box outlines: DESTROY!

Something that took me a while to figure out:

chrome_input_focus_border

The orange border around this input box only appears on focus, on mobile devices. It took a while longer to notice that it’s only on mobile Chrome too.

I understand that it’s a valuable inclusion for small screens where you’d like to know where your cursor or other input is actually being passed to, but if you wanted something other than the orange border, or to remove it entirely, trawling through your css for any reference to “border” or orange-y hex values can be a pain.

All you need to do is – for the element in question:

[css]
:focus {outline:none;}
[/css]

Annnnnd relax.

HTML5 input type “email” validation

The HTML5 “email” input type is great for short-cutting the usual email validation javascript mess. Just by defining your input box as “type=’email'” you get validation for free (in modern browsers).

html5_email_type_validation

But how do you hook into this? Perhaps change the message or do some other actions at the same time? Check out the “invalid” event:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
// do stuff
});

[/javascript]

Or if you’re old school

[javascript]
document.getElementById(’email-input’).addEventListener(‘invalid’, function(e){
// do stuff
});
[/javascript]

This returns a ValidtyState object on which you have the following properties:

  • badInput
  • customError
  • patternMismatch
  • rangeOverflow
  • rangeUnderflow
  • stepMismatch
  • tooLong
  • typeMismatch
  • valid
  • valueMissing

So you can work with it like so:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
if (e.target.validity.typeMismatch) {
alert("enter a valid email address!");
}
});
[/javascript]

Or you could even override the default message that appears in the tooltip:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
if (e.target.validity.typeMismatch) {
e.target.setCustomValidity("enter a valid email address!");
}
});
[/javascript]

Clever stuff, eh?

‘$(TargetPlatformVersion)’ > ‘X.X’ Error

Every now and then I’ll find that Visual Studio just blows up – seemingly without me having changed anything – throwing the error:

numeric comparison error

A numeric comparison was attempted on "$(TargetPlatformVersion)" that evaluates to "" instead of a number, in condition "'$(TargetPlatformVersion)' > '8.0'".

Where the number at the end changes every so often.

How to fix this? Annoyingly simple.

Repair Resharper and restart Visual Studio.
repair resharper

Hope that saves you a few hours..!