Web Developer Tools from Browserling

browserling-effortless-cross-browser-testing

Browserling – an awesome cross-browser testing service, has a collection of Web Developer Tools, which are as simple to use as possible.  There are now more than 80 (!!!) tools, according to this Peteris Krumins blog post, that provide immediate help with things like converting dates and times, formats like CSV, JSON, Markdown, HTML, XML, etc, generating passwords, minimizing or prettifying HTML, CSS, JavaScript, and more.

After a year of using NodeJS in production

There are days, when I feel jealous of all the young kids playing around with new technologies.  I need a certain level of stability and acceptance of the technology before I can apply it to client projects.  And I need time, which is a very scarce resource lately.

And yet there are days, when I feel good about being somewhat reserved and conservative in my technology stack choices.  Reading this blog post makes me feel just that.  Of course I need to try it out for myself and shape my own opinion, but with my lack of time, this should do.

I spent a year trying to make Javascript and more specifically Node work for our team. Unfortunately during that time we spent more hours chasing docs, coming up with standards, arguing about libraries and debugging trivial code more than anything.

Would I recommend it for large-scale products? Absolutely not. Do people do that anyway? Of course they do. I tried to.

I would however recommend Javascript for front-end development such as Angular or React (like you have another choice).

I would also recommend Node for simple back-end servers mainly used for websockets or API relay.

Now if only somebody wrote a similar post about Docker …

Simple file upload using jQuery and AJAX

Here’s something that came in helpful the other day at work – “Simple file upload using jQuery and AJAX“.  We were on the right track, but this blog post helped iron out the last few details.  In particular, this bit:

$.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                submitForm(event, data);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
            // STOP LOADING SPINNER
        }
    });

And a clarification of the parameters:

2 attributes need to be set to false:

  • processData – Because jQuery will convert the files arrays into strings and the server can’t pick it up.
  • contentType – Set this to false because jQuery defaults toapplication/x-www-form-urlencoded and doesn’t send the files. Also setting it to multipart/form-data doesn’t seem to work either.

There’s a GitHub repository with all the necessary example code.

JavaScript debugging tips

I came across this blog post which provides some very handy tips for debugging JavaScript in the browser.  My favorite top three are:

Display an object in a table format for an easier view

var animals = [
   { animal: ‘Horse’, name: ‘Henry’, age: 43 },
   { animal: ‘Dog’, name: ‘Fred’, age: 13 },
   { animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
 
console.table(animals);

with this output:

console.table

Unminify code as an easy way to debug JavaScript

unminify

Custom console log messages

console.todo = function(msg) {
	console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
 
console.important = function(msg) {
	console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
 
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

for this result:

console.log

Very handy stuff!

A love letter to jQuery

A love letter to jQuery – very beautiful and sentimental …

So thank you jQuery! It’s been a wonderful 10 years. I hope we have another 10, but if we don’t it will always be with dignity and respect that I remember you and never less, because you do the perfect job of making yourself redundant. It is befitting that you do this so gracefully. If the time does come to say goodbye it will be because you have given us all that you can. To not be needed does not mean you will not forever be important to the me and the web.

jQuery 3.0 Alpha release

Just a few weeks after we’ve started using jQuery 2, the news come in of the new major release of jQuery being not too far away:

It’s been a long time since we did a major release, and you certainly deserve one. So we’re glad to announce the first alpha of jQuery 3.0!

Despite the 3.0 version number, we anticipate that these releases shouldn’t be too much trouble when it comes to upgrading existing code. Yes, there are a few breaking changes that justified the major version bump, but we’re hopeful these breakages don’t actually affect that many people. The jQuery Migrate plugin can help you to identify compatibility issues in your code as well. Your feedback on the changes in this alpha will help us greatly, so please try it out on your existing code and plugins!

There are actually two releases here. First is jQuery 3.0, which supports modern browsers and environments from IE9 forward. Second is jQuery Compat 3.0, which includes support for IE8. As an added bonus, both jQuery and jQuery Compat will include support for Yandex.Browser, a freeware browser released in 2012. You can get the files from the jQuery CDN, or link to them directly