I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.
As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top All time answerers list.
I answered this question by userChris Lawrence:
I think I know the answer to this question already but thought I would throw it out there incase there was a workaround….
Just built a ionic app with ngcordova, which works fine and I have tested on my android device and deployed to playstore.
Just in the process of deploying to the apple app store. I currently don’t have an apple ios physical device to test the cordova plugins.
I am using sms, camera and local notification. These as far as am aware cannot be tested in the ios simulator in xcode.
Don’t really want to spend £400 on a tablet to test one app.. any one had the same problem and found a means of testing?
My answer was:
You can test plugins in iOS simulator.
edit: I just stumbled upon the official documentation where it states that even with Ionic View you can test these plugins:
- com.brodysoft.sqlitePlugin 1.0.3 “Brodysoft SQLitePlugin”
- com.ionic.keyboard 1.0.3 “Keyboard”
- com.phonegap.plugins.barcodescanner 1.1.0 “BarcodeScanner”
- org.apache.cordova.battery-status 0.2.12 “Battery”
- org.apache.cordova.camera 0.3.4 “Camera”
- org.apache.cordova.console 0.2.12 “Console”
- org.apache.cordova.device 0.2.13 “Device”
- org.apache.cordova.device-motion 0.2.11 “Device Motion”
- org.apache.cordova.device-orientation 0.3.10 “Device Orientation”
- org.apache.cordova.dialogs 0.2.11 “Notification”
- org.apache.cordova.geolocation 0.3.11 “Geolocation”
- org.apache.cordova.globalization 0.3.3 “Globalization”
- org.apache.cordova.network-information 0.2.14 “Network Information”
- org.apache.cordova.vibration 0.3.12 “Vibration”
- org.chromium.zip 1.0.0 “Zip”
How to test #Cordova plugins in #Ionic without a device? https://t.co/IpyYNV4uAn
— Nikola Brežnjak (@HitmanHR) October 20, 2015
I just came home from the ever so slightly awesome Ekobit DevArena X conference. As I usually do, I’ll share my notes that I took in my notebook and a few pictures.
Start your engines
Well, you can’t start a day on an empty stomach, right?
This is how the accreditation looked like:
The accreditation had a handy list of all the presentations on the back side:
As you can see, there were 4 tracks between which you could choose (yes, you could go to any presentation in any of the tracks in a certain timeslot). Chalk n’ Talk presentations are actually a cool thing where they aren’t actual presentations rather something like a round table where the presenter(s) discuss their real life experiences (and the input from the crowd is also highly desirable).
Keynote
- Presenters: Ivan Kardum, Nenad Bakić, Domagoj Pavlešić and Saša Tomičić
- 10th in a row Ekobit DevArena
- A very interesting project called Croatian Makers by Nenad Bakić who was very inspiring and kudos for starting all this
- They donated robotical equipment to over 50 schools in Croatia
- Serwantes
- Fantom 3
- Lego Mindstorms – can’t wait to get this for my little girl! Yeah, I know it’s an excuse for me to play with it too 🙂
- He shared a quite intriguing image with us:
Modern web application development in Visual Studio 2015
- Presenter: Ivan Popek
- Bower and npm come preinstalled with Visual Studio 2015. I wrote a detailed tutorial for Digital Ocean about Bower if you want to take a look.
- Gulp and Grunt are task runners which offer tools like minification, concatenation, linting, etc…
- Personally, I like Gulp better because of it’s clearer syntax
- Gulp is faster because it uses streams
- Git and Node are also preinstalled by default on VS 2015
- The way you “add” packages for Bower is that you create a bower.json file in the Solution explorer and as soon as you hit Save it installs the listed dependencies. It creates the Dependencies folder and a bower_components folder
- bower install runns automatically after you open up the project
- To add Gulp create a package.json file in the Solution explorer and as soon as you hit Save npm will install it. You can add additional Gulp dependencies the same way.
- To start writing Gulp tasks, create a gulpfile.js and hack on 🙂
- Visual Studio 2015 has a nice TaskRunner explorer where you can run the tasks manually. However, it’s way better to set a “watch” task inside Gulp so that it runs the tasks automatically for you. For example, if you’re using SASS it will compile to CSS automatically on every change to the SASS files. You can set the watch tasks to run after you reoppen the project with Watch -> Bindings->Project open
Clean code is your friend
- Presenters: Bruno Brozović and Antonija Malenica
- Technical debt
- Writing code : Reading code = 1 : 10 in terms of time. It’s way better to invest time at the beginning to write “clean code” as it will pay of in the later stages of the project
- The boy scout rule – always leave the campground cleaner than you found it
- YAGNI (You ain’t gonna need it) – do not add functionality until deemed necessary
- KISS (Keep It Simple Stupid) – Simplicity is better than complexity
- DRY (Don’t Repeat Yourself) – every piece of knowledge must have single, unambigious, authorative representation within system
- Principle of least surprise – do the least surprising thing
- SRP (Single Responsibility Principle) – a class should have only one reason to change
- Single level of abstraction
- Methods
- names – detail and descriptive
- short
- number of arguments as small as possible (0, 1, 2)
- SRP
- Comments – you should strive to write selfdocumenting code
- Classes
- QualitatyClassName (25-30 characters)
- SRP
- smaller number of cohesive classes
- Open Closed Principle – open for extension, closed for modification
- Learning test
- And now, a spectacle! In a room of about 100 people when the question “How many of you are using Unit testing?” was asked only 4 people raised their hands
Lunch
We’re outsorcing products and services, not people!
- Presenters: Luka Abrus (Five Minutes), Vedran Brničević (Ekobit)
- Ekobit started in 1992
- ALM, BizDataX
- Five minutes needed 7 years to come to the point where 100% of the things they do is on the USA market
- Customer feedback by literally going live from door to door and ask
- Landing pages + AdWords + Sign me up
- Nobody buys enterprise software without a support
- Europe’s problem is language barriers from country to country
- Funny anecdote: when you say to an American that you’re from Croatia: “Oh, yes Dubrovnik – Game of Thrones!”. Also funny one was “oh, you’re just a Russian school of mathematics”. And thus, they believe we are good programmers; designers not so much.
- You need to be willing to hop the plane and go to a meeting at any time
- Five Minutes has currently 12 free spots
- NY Area software developer 150-200$ per hour (jaw-dropping!)
- Quality is everything!
- Put your code to GitHub, designs to Dribble, Behance
- The main problem that both of the presenters expressed was that there are just not enough (quality) developers
Where is this web going?
- Presenters: Domagoj Pavlešić, Ivan Popek, Renato Železnjak, Josip Klarić, Ratko Ćosić
- this was a round table like presentation
- Browser as an Operating System
- Microsoft is slowing down the Web standardization
- Too many JS frameworks (you don’t say 😉)
- NO for monolith framework
- Use linting
- Gridster, Selectize, Knockout
- Throw jQuery out
- TypeScript two thumbs up
Automated delivery in Visual Studio 2015
- Presenters: Ognjen Bajić and Ana Roje Ivančić
- Build vNext
- 2015 Intentional Extensibility – open source
- Custom build workflows
- Real time output
- Versioning
- Cross-platform build (Win, Mac, Linux)
- Build .NET, Java, Android, iOS
- Ant, CMake, Maven, Xcode Build, Android Build
- Agents, Pools, Queues
- Testing, web performance, load tests
Aurelia – new generation JavaScript framework
- Presenters: Ratko Ćosić and Mario Peroković
- AMD
- modular programming
- RequireJS
- CommonJS
- TypeScript
- SPA
- chunking
- templating
- controllers
- Which framework should I choose?
- Durandal -> Aurelia
- JavaScript is a subset of TypeScript which is compiled in ES5. Microsoft is developing along with Anders Hejlsberg (C# creator)
- Angular2 uses TypeScript
- Every view starts with <template>
- MVVM – model view view-model
- DI – dependency injection
- Parent view models
- Routing
- Screen activation lifecycle
- uses jspm
- jspm install aurelia-http-client
- <input type=”text” value.bind=”firstName” /> and then reference it like ${firstName}
- Debugging
- compile-spy
- view-spy
They had a nice additional prize draw for those who asked questions (you get a small paper which you toos in a drawing bowl). I got mine on the last presentation. However, no luck in winning something 🙁
However, as every year, they are giving prizes for the first few people who sign up for the conference. This year I signed up at 6th place, and because of that I got a nice 2 tickets at Terme Tuhelj, and also a nice hoodie with a number 6 🙂
Thanks and hope to see you next year!
If you write on the web, you must have come across the awesome Markdown:
a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
You can learn more about it from the official documentation.
There are many editors that allow you to write in Markdown but, as I found, most of them require a license. Besides, wouldn’t it be great that your own editor would have a Markdown support? That’s why I love Sublime Text, it has a plugin for everything. Well, ok, it doesn’t have a plugin to throw out sandwiches from your computer, but I guess it will be able to in the not so distant future.
Ok, jokes and wishes aside, let see how to set up live Markdown preview on Windows with Sublime Text and Markmon plugin.
Install Markmon:
npm install -g markmon
Install pandoc.
Install Markmon Sublime Text plugin through its Package Control (search for “Markmon”).
Make sure you have markmon and pandoc in your PATH variable.
Run markmon in the folder where is your .md file, like this:
markmon myMDfile.md
open up your browser at localhost:3000.
Write on! 
How to set up live #Markdown preview on #Windows with #Sublime Text and #Markmon http://t.co/ROZZxCbvGb
— Nikola Brežnjak (@HitmanHR) October 18, 2015
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.
I answered this question by user user5148540:
This is probably a Windows specific issue but I haven’t found any information when googling this issue. I had been using ionic framework which relies on Cordova (or Phonegap). However, the problem is not specific to any of these packages. I see this error quite often. So, the error is when I run a command such as the following:
npm install -g cordova
However, I could substitute various other packages and get the same error. I’ll paste the snippet (very brief) below of the error message. What is strange is that I had an ionic project working in that directory earlier. Then today it told me that ionic could not be found. My hunch is that this is a different issue than the main issue I am describing here.
I installed git bash so I do have a linux-like environment that I could try. I would just select Git Bash for a bash window with various bash commands. If there is an easier way to fix this for Windows users, please let me know. I have seen courses on Pluralsight where the instructors seem to be happily using npm with no problems. Also, when I use yeoman, I also at some point, in many cases, get the same error.
The error is
npm ERR! Failed to parse json npm Unexpected token '\u0000' at 1:1 npm ERR! npm ERR! ^ npm ERR! File: c:\Users\Bruce\AppData\Roaming\npm-cache\amdefine\1.0.0\package\package.json npm ERR! Failed to parse package.json data. npm ERR! package.json must be actual JSON, not just JavaScript. npm ERR! npm ERR! This is not a bug in npm npm ERR! Tell the package author to fix their package.json file. JSON.parse.
Thanks in advance for any help/advice, Bruce
My answer was:
Via this question on SO it could be that you just have to do:
npm cache cleanBut, also try the other methods suggested there like adding the registry option:
npm install <packagename> --registry http://registry.npmjs.org/Or, if you’ve been mingling with the
package.jsonfile by yourself, check if it’s valid.https://twitter.com/HitmanHR/status/655111949139599364
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.
I asked the following question which turned out to be quite a popular one:
From this blog post we have this example of a prototypal inheritance in JavaScript:
var human = {
name: '',
gender: '',
planetOfBirth: 'Earth',
sayGender: function () {
alert(this.name + ' says my gender is ' + this.gender);
},
sayPlanet: function () {
alert(this.name + ' was born on ' + this.planetOfBirth);
}
};
var male = Object.create(human, {
gender: {value: 'Male'}
});
var female = Object.create(human, {
gender: {value: 'Female'}
});
var david = Object.create(male, {
name: {value: 'David'},
planetOfBirth: {value: 'Mars'}
});
var jane = Object.create(female, {
name: {value: 'Jane'}
});
david.sayGender(); // David says my gender is Male
david.sayPlanet(); // David was born on Mars
jane.sayGender(); // Jane says my gender is Female
jane.sayPlanet(); // Jane was born on Earth
Now, what I’m wondering is how does one properly “override”, for example, the sayPlanet function?
I tried it like this:
jane.sayPlanet = function(){
console.log("something different");
};
and this works.
However, I also tried it like this:
var jane = Object.create(female, {
name: {value: 'Jane'},
sayPlanet: function(){
console.log("something different");
}
});
but I get a type error.
My questions are:
- how can I add the
sayPlanetfunction inside theObject.create? - is this at all “a good way” or is there a better (best practice) way?
edit: I figured a way how I can add the sayPlanet inside the Object.create:
sayPlanet: {
value: function(){
console.log("something different");
}
}
However, a second question remains. Also, I would appreciate if someone can explain it in a bit deeper level if this is “a good way” to use it like this.
edit #2: As Mahavir pointed below, this is an awful example, because as it turns out you can’t (please correct me if I’m wrong) change the name of jane once it has been Object.created.
edit #3: (man oh man, this is going to get me in a certain facility where people wear white coats). As @WhiteHat pointed below, indeed you can set a name property to be updatable like this:
var jane = Object.create(female, {
name: {
value: 'Jane',
writable: true
}
});
and then you can do jane.name="Jane v2.0";.
I’ll be honest here people – I do not have a clue as to which direction to take with seemingly so many options. And just today I read Eric Elliot https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3 and now I don’t know what to think anymore because he goes on to argue that people at the ES6 aren’t quite doing it right :O. Meh, I guess I’ll have to revisit the Crockfords book yet again, decide on a “one way” and see how far it takes me.
I got quite a few answers, and I also set up a bounty since my question at first didn’t get much attention. Finally the answer by user Julien Grégoire which I accepted was this one:
Using
Object.createis certainly a valid approach, but the example itself seems to me a bit misleading regarding the inner workings ofObject.create. The blog post does a really good job of summarizing the different ways to create objects in javascript, but I don’t think the example forObject.creategives a good idea of how it works, which is more similar to thenew/constructorapproach than it may seem.
Object.createallows to create an object based on aprototype, but without aconstructor. This means that theprototype chainof the created object isn’t dependent on aconstructor, (which is why it may be simpler to follow, this prototype linked via the constructor is not very straightforward or easy to follow). ButObject.createstill creates aprototype chain, in the same waynewdoes.So in your example, when you define
nameinhumanfor example here:var human = { name: '',And then when you create
jane:var jane = Object.create(female, { name: {value: 'Jane'}You’re not really assigning a value to the
name propertyyou defined inhuman. You’re in fact adding a property to jane. Buthuman.namestill is a property inprototype chainofjane. It works because javascript will follow the prototype chain to find the first matching property, buthuman.nameis still somehow linked tojane.See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
Same thing happens if you use a constructor:
var Person = function(gender, name) { this.name = name; } var newPerson = new Person();And same goes for
sayPlanetfunction.It’s a valid approach, but can lead to strange behaviors. For example, you could decide to modifiy
sayPlanetfor all humans by assigning it this way:human.sayPlanet = function(){console.log('new sayPlanet')}This would then work for all
humans, except the ones for which you have given asayPlanetproperty of their own. Which in your case may be the expected result. But still, you have to see ifsayPlanetreally should be a property of human.With
gender, it’s applied inhuman, and inmaleandfemale. So changinghuman.genderwouldn’t work on any one. But it’s still a property ofhuman, which is a bit confusing when you want to work with these objects. You basically have a property that is defined, that is writable, but that when changed has no effect at all. It’s mainly an indication as to which property you need to add to your humans instances or somewhere in the prototype chain. Again, it seems to be used a lot, but when explained with this kind of examples, it somehow gives the impression thatObject.createjust combines properties, but it’s not what it does.In the end, you need to chose if you want to work with
prototypesor not. If not, then Functional inheritance is probably the best way. Then each object is different and has its own set of properties, that you can initialize, and you don’t have to worry aboutprototypes.If you want to use
prototypes, then you can usenew/constructororObject.createapproach. ButObject.createwill create a prototype chain the same waynewdoes, it just gets rid of the constructors.A small example of how
Object.createandnewshare some behaviors:var human = { name: '', gender: '', planetOfBirth: 'Earth', sayGender: function () { console.log(this.name + ' says my gender is ' + this.gender); }, sayPlanet: function () { console.log(this.name + ' was born on ' + this.planetOfBirth); } }; var male = Object.create(human, { gender: {value: 'Male'} }); var female = Object.create(human, { gender: {value: 'Female'} }); var david = Object.create(male, { name: {value: 'David'}, planetOfBirth: {value: 'Mars', configurable: true} }); var jane = Object.create(female, { name: {value: 'Jane'}, sayPlanet: {value: function(){ console.log("something different"); }, writable: true, enumerable: true, configurable: true } }); var Male = function(name){ // in this case the real constructor is female or male. Name is the only property that 'needs' to be initialized this.name = name; this.planetOfBirth = 'Jupiter'; } Male.prototype = Object.create(male); var john = new Male('John') david.sayGender(); // David says my gender is Male david.sayPlanet(); // David was born on Mars jane.sayGender(); // Jane says my gender is Female jane.sayPlanet(); // Jane was born on Earth john.sayGender(); // John says my gender is Female john.sayPlanet(); // John was born on Earth delete david.planetOfBirth; //just to show how human properties will still be in the chain even if you delete them delete john.name; // It's true also if you use new. delete jane.sayPlanet; console.log('\n','----after deleting properties----'); david.sayPlanet(); jane.sayPlanet(); john.sayGender(); human.planetOfBirth = 'Venus'; // This will apply to all humans, even the ones already created console.log('\n','----after assigning planetOfBirth on human----'); david.sayPlanet(); jane.sayPlanet(); john.sayPlanet(); // John still has planetOfBirth as its own property, since it wasn't deleted delete john.planetOfBirth; console.log('\n','----after deleting john planetOfBirth----'); john.sayPlanet(); // But it's still thereAnd in fact (just to be more confusing), some people combine
Object.createwithnew/constructoror with Functional inheritance. Something like this for example:https://john-dugan.com/object-oriented-javascript-pattern-comparison/#oloo-pattern
Applied to your example it would give something like this:
var human = { planetOfBirth: 'Earth', sayGender: function () { console.log(this.name + ' says my gender is ' + this.gender); }, sayPlanet: function () { console.log(this.name + ' was born on ' + this.planetOfBirth); }, init: function(name){ this.name = name; } }; var male = Object.create(human, { gender: {value: 'Male'} // This is part of male/female prototype and can't be written, which seems logical }); var female = Object.create(human, { gender: {value: 'Female'} }); var david = Object.create(male).init('David'); david.planetOfBirth = 'Mars'; var jane = Object.create(female).init('Jane') jane.sayPlanet = function(){console.log('something different')}; var john = Object.create(male).init('John'); john.planetOfBirth = 'Jupiter'; david.sayGender(); // David says my gender is Male david.sayPlanet(); // David was born on Mars jane.sayGender(); // Jane says my gender is Female jane.sayPlanet(); // Jane was born on Earth john.sayGender(); // John says my gender is Female john.sayPlanet(); // John was born on Earth delete david.planetOfBirth; // Overridden properties will still exists after delete, but not the others. delete john.name; delete jane.sayPlanet; console.log('\n','----after deleting properties----'); david.sayPlanet(); jane.sayPlanet(); john.sayPlanet(); human.planetOfBirth = 'Venus'; // This will apply to all humans, even the ones already created. // But not for humans woth overridden planetOfBirth. console.log('\n','----after assigning planetOfBirth on human----'); david.sayPlanet(); jane.sayPlanet(); john.sayPlanet(); // John's name is now undefinded delete john.planetOfBirth; console.log('\n','----after deleting john planetOfBirth----'); john.sayPlanet(); //Not necessarily better, but it works as well, and in my opinion has certain advantages.
In any case, as others said, there doesn’t seem to be a standard or default way to do this.
Also, another great answer was by a user Nice-Guy:
The best practice as I’ve learned is to define write permissions at the Object prototype level. I learned this technique from reading Addy Osmani’s JavaScript Design Patterns, it’s very reputable and open source online: http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Please check out the sayPlanet property in the example below. Keep in mind, you do not need to set all the other properties’ “writeable” to false, I only did it in my example code to illustrate the point. This approach affords more flexibility and reusability than the other, still valid, approaches. Here, you may notice that this is the
Object.definePropertiessyntax within the prototype.var human = { name: { value: '', writable: false //only to illustrate default behavior not needed }, gender: { value: '', writable: false //only to illustrate default behavior not needed }, planetOfBirth: { value: "Earth", configurable: false //only to illustrate default behavior not needed } }; //here we define function properties at prototype level Object.defineProperty(human, 'sayGender', { value: function() { alert(this.name + ' says my gender is ' + this.gender); }, writable: false }); Object.defineProperty(human, 'sayPlanet', { value: function() { alert(this.name + ' was born on ' + this.planetOfBirth); }, writable: true }); //end definition of function properties var male = Object.create(human, { gender: { value: 'Male' } }); var female = Object.create(human, { gender: { value: 'Female' } }); var david = Object.create(male, { name: { value: 'David' }, planetOfBirth: { value: 'Mars' } }); var jane = Object.create(female, { name: { value: 'Jane' } }); //define the writable sayPlanet function for Jane jane.sayPlanet = function() { alert("something different"); }; //test cases //call say gender before attempting to ovverride david.sayGender(); // David says my gender is Male //attempt to override the sayGender function for david david.sayGender = function() { alert("I overrode me!") }; //I tried and failed to change an unwritable fucntion david.sayGender(); //David maintains that my gender is Male david.sayPlanet(); // David was born on Mars jane.sayGender(); // Jane says my gender is Female jane.sayPlanet(); // something differenthttps://twitter.com/HitmanHR/status/653822447385505792